Question

我在这里列出了包含一系列对象的列表：

this.state = {
  list: [{test: 2}, {test33: 4}]
}

如果找到相同的名称（对象中的第一个值），我创建了一个更改数字（对象中的第二个值）的函数。但是我不知道如何重新渲染我的组件然后才能看到我的更新状态。

updateData(item1, item2){
    if (!item1 || !item2) {
      return 'Enter valid item1 or item2 to add item';
    }

    var hasBeenFound = false;

    this.state.list.forEach(function (item) {
        if (item.item1 === item1) {
            hasBeenFound = true;
           item.item2 = item2;
        }
    });

    if(!hasBeenFound){
      this.setState((prevState) => ({
        list: prevState.list.concat({item1: item1, item2: item2})
      }));
    }

  }

出于某种原因，即使它发现了一些相同的item1，它也不会重新渲染item2，即使我将它设置为新值。我需要使用生命周期功能吗？请帮忙！新手在这里！

Answer 1

此代码变异（就地更改）的问题特别指出此行item.item2 = item2;

this.state.list.forEach(function (item) {
        if (item.item1 === item1) {
            hasBeenFound = true;
           item.item2 = item2;
        }
    });

forEach传递对数组的每个对象的引用的原因，因此对此对象的任何更改都会更改原始数组（从而更改状态）。
更好的方法是使用像这样的setState方法

 if(this.state.some(item => item.item1 === item1){
    hasBeenFound = true;
    this.setState(prevState => ({
       list: prevState.list.map(item => {
         if(item.item1 === item1) return {...item, item2: item2};
         return item;
       })
 }

这段代码可以进一步改进，我刚刚添加了最小的改动，使其有效。

在更改部分数据后重新渲染状态 - reactjs

1 个答案: