Question

我有以下声明：

    constructor(props) {
    super(props);
    this.state = {
        productArray: [{
            barcode: '',
            name: ''
        }],
        numberOfRecords: '',
        return_code: '',
        return_string: ''
    };        
}

我希望像这样引用状态字段：

this.state.productArray [0] .barcode和this.state.productArray [1]

我也有一段代码尝试更新状态。代码如下：

for (counter=0;counter<numberOfRecords;counter++) {

    currentComponent.setState({productArray[counter].barcode: tempData.barcode[counter]});                        
    currentComponent.setState({productArray[counter].name: tempData.name[counter]});
}

这无法编译，并且错误指向第一个setState命令。编译器指向[在对productArray [counter] .barcode的引用中说它期望一个'，'。

我可以正确定义状态吗？如果没有，正确的语法是什么？如果是，引用个别状态字段的正确语法是什么？

Answer 1

理想情况下，您只需要对ExecutorService进行一次调用，就可以创建一个临时变量来存储计算，例如

setState

通过使用传播运算符const { productArray, numberOfRecords } = this.state; const newProducts = [ ... productArray ]; for( let counter = 0; counter < numberOfRecords; counter ) { const item = newProducts[ counter]; newProducts[ counter] = { ...item, barcode: 'value' }, } this.setState({ productArray: newProducts });，您可以创建shallow copies对象和数组。

Answer 2

您不能直接将状态设置为

let tempvar = this.state.productArray;
for (counter=0;counter<numberOfRecords;counter++) {
tempvar[counter].barcode= newValue
}
this.setState({productArray:tempvar})

Answer 3

更新对象嵌套数组的推荐方法是利用Object.assign的功能。请记住，Object.assign将不会执行深度克隆，因为它仅复制属性值，

this.setState({
    productArray:  Object.assign({}, this.state.productArray[0], {
      barcode: 'any value',
    })}, ()=>{
      console.log(this.state)
    }
  );

在您的情况下，这就是使用速记符号实现此目的的方法：

 for (var counter = 0; counter < 1; counter++) {
  this.setState({
    productArray:  Object.assign({}, this.state.productArray[counter], {
      barcode: tempData.barcode[counter],
      name: tempData.name[counter]
    })}, ()=>{
      console.log(this.state)
    }
  );
}

Answer 4

关于数据，我正在挑选tempData数组的特定部分

和

我可以从状态中删除numberOfRecords并从tempData.length中获取它。

好，所以productArray包含tempData中对象的属性子集，而不是项目的子集。

然后，我什至不必费心尝试复制值并简单地map新值。

currentComponent.setState({ 
  productArray: tempData.map(item => {
    const {barcode, name} = item;
    return {barcode, name};
  })
});

//or in short

currentComponent.setState({ 
  productArray: tempData.map(({barcode, name}) => ({barcode, name}))
});

回答您的问题；如果要访问和更新某些嵌套属性，则应在setState()中使用update-function，以便在您的代码尝试对其进行修改之前，所有先前的更新都已应用于this.state。

类似这样的东西：

currentComponent.setState((state) => {
  for(let i = 0; i<tempData.length; ++i){
    let from = tempData[i], to = state.productArray[i];

    to.name = from.name;
    to.barcode = from.barcode;
  }
  return state;
});

此方法的缺点/不足之处在于，无法解决tempData.length !== state.productArray.length的情况。

reactJS对象的状态数组-如何在setState（）中引用状态数组对象

4 个答案: