第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 應(yīng)用程序中,我在 firebase 上刪除了我的組件數(shù)據(jù),但即使我更改了狀態(tài)

在 React 應(yīng)用程序中,我在 firebase 上刪除了我的組件數(shù)據(jù),但即使我更改了狀態(tài)

泛舟湖上清波郎朗 2023-04-01 17:34:38
我從 firebase 獲取我的數(shù)據(jù),遍歷它們并將它們顯示到 dom。然后我添加了一個刪除按鈕并使用 axios 發(fā)送了一個刪除請求,它是從 firebase 中刪除的,但是 dom 沒有重新渲染。我設(shè)置了一個刪除狀態(tài)以在“then”塊中更改它,但即使我更改狀態(tài)它也不會重新呈現(xiàn)!我能做些什么?class Orders extends Component {  state = {    orders: [],    loading: true,    deleting: false,  };  componentDidMount() {    axios      .get('/order.json')      .then((res) => {        // console.log(res.data);        const fetchedOrders = [];        for (let key in res.data) {          fetchedOrders.push({ ...res.data[key], id: key });        }        this.setState({ loading: false, orders: fetchedOrders });      })      .catch((err) => {        this.setState({ loading: false });      });  }  deleteHandler = (id) => {    axios.delete(`/order/${id}.json`).then((res) => {      this.setState({ deleting: true });      console.log(res, this.state.deleting);    });  };  render() {    return (      <div>        {this.state.orders.map((order) => (          <Order            key={order.id}            ingredients={order.ingredient}            price={order.price}            id={order.id}            delete={() => this.deleteHandler(order.id)}          />        ))}      </div>    );  }}
查看完整描述

1 回答

?
慕俠2389804

TA貢獻1719條經(jīng)驗 獲得超6個贊

您必須在調(diào)用 deleteHandler 時更新訂單狀態(tài)!試試這個代碼!


import React from 'react';

import axios from 'axios';


// YOUR OTHER IMPORT GOES HERE


class Orders extends Component {

  constructor(props) {

     this.state = {

       orders: [],

       loading: true,

       deleting: false,

     }

  }


  componentDidMount() {

    axios

      .get('/order.json')

      .then((res) => {

        // console.log(res.data);

        const fetchedOrders = [];

        for (let key in res.data) {

          fetchedOrders.push({ ...res.data[key], id: key });

        }

        this.setState({ loading: false, orders: fetchedOrders });

      })

      .catch((err) => {

        this.setState({ loading: false });

      });

  }


  deleteHandler = (id) => {

    this.setState({

      orders: this.state.orders.filter(orderValue => orderValue.id !== id)

    })

    axios.delete(`/order/${id}.json`).then((res) => {

      this.setState({ deleting: true });

      console.log(res, this.state.deleting);

    });

  };


  render() {

    return (

      <div>

        {this.state.orders.map((order) => (

          <Order

            key={order.id}

            ingredients={order.ingredient}

            price={order.price}

            id={order.id}

            delete={() => this.deleteHandler(order.id)}

          />

        ))}

      </div>

    );

  }

}


查看完整回答
反對 回復(fù) 2023-04-01
  • 1 回答
  • 0 關(guān)注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號