Question

我在下面给出了一个条件，我想更新状态中存在的对象数组，尽管状态正在变化但没有呈现，也许状态以某种方式被直接突变，或任何其他原因。我无法弄清楚我在做什么错

  handleCondition = e => {
    const { value, id } = e.target;
    this.setState(
      ({ newData }) => {
        const testData = newData;
        testData.find(data => data.variable === id.split('_')[1])[id.split('_')[0]] = value;
        return ({
          newData: testData
        });
      },
      () =>
        localStorage.setItem(
          "newData",
          JSON.stringify(this.state.newData)
        )
    );
  };

render(){
return(
 <select
    id={`wall_${data.variable}`}
    className="custom-slt-home"
    onChange={this.handleCondition}
    value={data.wall}
   >
    <option value="paint">Paint</option>
    <option value="wallpaper">Wallpaper</option>
 </select>
)

Answer 1

在这一行：

testData.find(data => data.variable === id.split('_')[1])[id.split('_')[0]] = value;

您不对数组进行突变，因此您将返回到setState相同的值。

尝试以下方法：

const itemIndex = newData.findInex(data => data.variable === id.split('_')[1]);
const item = [...newData[itemIndex]];
item[id.split('_')[0] = value;
return ({
   newData: [...newData.slice(0, itemIndex), item, ...newData.slice(itemIndex + 1)];
});

可能存在一些问题，因为您没有提供有关数据结构的任何信息。但我希望你能理解这一点。

不在setState上重新渲染

1 个答案: