Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/ssh/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何映射以在Reactjs中使用setState更新对象_Reactjs - Fatal编程技术网

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

如何映射以在Reactjs中使用setState更新对象,reactjs,Reactjs,我有这样一种状态: state = { formdata:{ name: null, about: null, price: null, offerPrice:null, playStoreUrl:null, appStoreUrl:null , photo:null, } } 我想要什么:更新模态内部的表单我用它来更新产品。我在组件中使用了新的道具willreceiveprops 我做到了: componentWillRece

我有这样一种状态:

state = {
  formdata:{
    name: null,
    about: null,
    price: null,
    offerPrice:null,
    playStoreUrl:null,
    appStoreUrl:null ,
    photo:null, 
  }
}
我想要什么:更新模态内部的表单我用它来更新产品。我在
组件中使用了新的道具willreceiveprops
我做到了:

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})

  })
}
MyProblem:这填充了对象,但在modal内部的表单中,我只看到了最后一个产品,而不是在modal中,当单击以更新它的任何产品时注意:
更新产品包含:

{
  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
}

我认为这是因为setState()调用位于错误的位置(并且一次只能调用一个对象):


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

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

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

要解决此问题,请仅将单击的产品详细信息以状态存储在onClick handler函数中,而不是
componentWillReceiveProps
方法。为此,需要使用onClick函数绑定产品id

像这样:

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 })
    }
  })
}

在状态中,您维护的是一个对象(一个产品),如果有多个产品,它需要是一个数组,并且您只能看到最后一个产品,因为最后您要在状态中保存最后一个产品的详细信息。如果有多个产品,它需要是一个数组?它是一个对象:
formdata:{…}
,它应该是:
formdata:[{…}]
同一个问题一个产品重复了你能展示更新代码吗,你尝试了什么?它给了我没有定义的formdata那么你建议的解决方案是什么
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 })
    }
  })
}