如何在 Reactjs 中使用 setState 映射以更新对象

Question

我有这个状态：

state = {
  formdata:{
    name: null,
    about: null,
    price: null,
    offerPrice:null,
    playStoreUrl:null,
    appStoreUrl:null ,
    photo:null, 
  }
}

我想要的：在模态中更新表单 我用它来更新产品。我在里面使用了新道具componentWillReceiveProps 我做了：

componentWillReceiveProps(nextProps){
  let Updateproduct = nextProps.productlist.productlist.Products;    
  Updateproduct.map((item,i) => {
    let formdata  = Object.assign({}, this.state.formdata); 
    formdata.name = item.name 
    formdata.about = item.about 
    formdata.price = item.price 
    formdata.offerPrice = item.offerPrice 
    formdata.playStoreUrl = item.playStoreUrl 
    formdata.appStoreUrl = item.appStoreUrl
    formdata.photo = item.photo
    console.log(formdata)
    this.setState({formdata})
  })
}

我的问题：这填充了对象，但在模态内的表单中，当单击以更新任何产品时，我只看到了最后一个产品，而不是全部在模态中。注意：Updateproduct包含：

{
  about: "about product1"
  appStoreUrl: "https://itunes.apple.com/us/app/snapchat/id447188370?mt=8"
  name: "p1"
  offerPrice: 99.99
  photo: "images/products/"
  playStoreUrl: "images/products/"
  price: 1000
}
{
  about: "about product2"
  appStoreUrl: "https://itunes.apple.com/us/app/snapchat/id447188370?mt=8"
  name: "p2"
  offerPrice: 99.99
  photo: "images/products/"
  playStoreUrl: "images/products/"
  price: 2000
}

Answer 1

问题是

，您希望在状态变量中存储用户单击的单个特定产品项，但使用当前代码，您始终存储最后一个产品项。此外，循环中的设置状态不是一个好方法。

要解决此问题，请仅将单击的产品详细信息存储在 onClick 处理程序函数中的状态中，而不是componentWillReceiveProps方法。为此，您需要将产品 ID 与 onClick 函数绑定。

喜欢这个：

onClick={this.getProductId.bind(this, item.id)}
// click handler function
getProductId = (id) => {
  let productObj = {};
  let Updateproduct = this.props.productlist.productlist.Products;
  Updateproduct.forEach((item,i) => {
    if(item.id == id) {
      productObj = {
        name: item.name,
        about: item.about,
        price: item.price,
        offerPrice: item.offerPrice,
        playStoreUrl: item.playStoreUrl,
        appStoreUrl: item.appStoreUrl,
        photo: item.photo
      };
      this.setState({ formdata: productObj, id: id })
    }
  })
}

Answer 2

您正在地图中设置您的状态。如果您将地图视为一个循环，则意味着每次迭代都会覆盖它。因此，您只会显示最后一个。

Answer 3

我认为

这是因为您的setState((调用在错误的位置(并且一次只能有一个对象(：

let data =[];
UpdateProduct.map((item, i) => {
  let formdata = null;
  // do your formdata stuff but append it as part of an array
  data.push(formdata);
});
this.setState({ formdata: data });

然后我认为它应该得到所有产品。