过滤对象数组并设置为状态数组变量

Question

这是我将按 orderId 过滤然后设置为状态变量的 JSON 输入。[{"orderId":3,"userId":3,"firstName":"Amal","lastName":"kankanige","contactNo":"011-3456787","status":"pending","deliveryAddress":"No:24/c,Anders Road,Wijerama,Wijerama,Srilanka","productName":"Apple","quantity":2,"total":100.0,"id":null,"order_date":"2019-01-31 10:28:29"}]这是我的状态。  this.state = {      merchentOrders: [],      filterMerchentOrders: []    }//这是方法当我按 orderId 过滤时，它成功运行，然后我想将过滤后的输出设置为“ this.setState({filterMerchentOrders: filterMerchentOrdersX});”。当我调出如下状态时，未设置值。getOrderDetails = id => {    console.log("id ==" ,id);    let filterMerchentOrdersX = this.state.merchentOrders.filter(value => {      return (        value.orderId.toString()          .indexOf(id) !== -1      );    });             this.setState({filterMerchentOrders: filterMerchentOrdersX});   //this is working       console.log("filterMerchentOrdersX ==" ,filterMerchentOrdersX);          //this gives an empty array        console.log("this.state.filterMerchentOrders ==" ,this.state.filterMerchentOrders);  };

Answer 1

这可能是setState异步运行的原因，当您console.log的值状态可能未更新时。

要查看更新后的状态，您可以传递一个回调函数。

this.setState({filterMerchentOrders: filterMerchentOrdersX},()=>{

   console.log("this.state.filterMerchentOrders ==" ,this.state.filterMerchentOrders);

})

Answer 2

由于您使用的是 ES6 语法，因此您的函数可以更短更简洁。但在我看来你没有做错任何事

getOrderDetails = id => {

    const filterMerchentOrders = this.state.merchentOrders.filter(

     value => value.orderId.toString().indexOf(id) !== -1

    );

    this.setState({filterMerchentOrders});

}