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

您已经在setState方法之后立即编写了console.log（），因为setState是一个异步方法，并且在Java脚本运行console.log时它会向您显示以前未设置数组的状态，为此，您应该将控制台放在setState的第二个参数中，该参数是一个回调函数。

this.setState({[event.target.name]: event.target.files[0]},()=>console.log(this.state));

或者您可以简单地使用户异步等待。

Answer 3

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

getOrderDetails = id => {
    const filterMerchentOrders = this.state.merchentOrders.filter(
     value => value.orderId.toString().indexOf(id) !== -1
    );
    this.setState({filterMerchentOrders});
}

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

3 个答案: