反应:使用扩展运算符更新 State 内部的数组返回的结果比需要多 1,000 倍

Question

我正在尝试从render()方法中运行的.map()方法中更新组件状态内的数组。 我正在映射的数组中目前有 9 个对象，我希望从中提取属性并将其添加到状态内的数组中。当console.log()状态以查看为什么我的页面冻结了这么长时间时，我看到它正在迭代每个条目的 1,000 个副本。

下面是我正在迭代的九个对象之一的示例

{
"name": "Trap_808",
"key" : "Q",
"path": "https://firebasestorage.googleapis.com/v0/b/online-coding.appspot.com/o/drum%20samples%2Ftrap-808-08.wav?alt=media&token=c3c63635-45b0-4c99-82ff-e397f1153fa0"
}

以下是我在构造函数中定义状态的方式。

this.state = { currentSound: '', triggerKeys: [] };

我正在尝试做的是在迭代对象时将对象的key属性添加到triggerKeys属性。这就是我使用.map()方法渲染九个对象的方式。

<ul id="pad-shell">
{
DRUM_PATCH.map( sound =>{
this.setState({ triggerKeys: [...this.state.triggerKeys, sound.key] });
console.log(this.state);
return <DrumButton
name={sound.name}
soundKey={sound.key}
sourceLink={sound.path}
trigger={this.updateSound}
/>
});
}
</ul>

我也尝试像这样更新状态

this.setState( prevState =>{ return { triggerKeys: [...prevState.triggerKeys, sound.key] } });

上面的例子实际上是返回 9,000 个条目的示例，上面的代码返回 1,000 个相同条目。 除此之外，其他一切都按预期工作，所以我认为我的代码中其他地方没有其他事情发生。 谁能发现问题出在哪里？ 如果您需要更多代码，请告诉我。

Answer 1

正如其他人所说，您不应该在render中使用this.setState- 这样做很可能会导致无限更新循环。

您尚未提供足够的代码上下文来给出明确的答案，但是

如果DRUM_PATCH来自道具

class Component extends React.Component {
constructor (props) {
super(props)
this.state = { triggerKeys: props.drumPatch.map(s => s.key) }
}

render() {
...
}
}

如果DRUM_PATCH只是一个常数

this.state = { triggerKeys: props.drumPatch.map(s => s.key) }

成为

this.state = { triggerKeys: DRUM_PATCH.map(s => s.key) }

Answer 2

嘿，我想你在渲染函数中这样做，如果是，那么每次它改变状态时，它都会重新渲染并再次更改状态，这将是一个无限循环。

this.setState({ triggerKeys: [...this.state.triggerKeys, sound.key] });

这是罪魁祸首