Question

我正在尝试从.map()方法内部运行的render()方法内部更新组件状态内部的数组。目前，我正在映射的数组中有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函数中执行的，如果是的话，则每次更改状态时，它将重新渲染并再次更改状态，这将是一个无限循环。

imageV.setImageBitmap(BitmapFactory.decodeStream(socket.getInputStream()));)

这是元凶

Answer 2

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

您没有提供足够的代码上下文来提供明确的答案，但是

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

反应：使用传播运算符更新State内部的数组将返回比所需结果多1000倍的结果

2 个答案: