首页 文章

对象数组上的React setState重新呈现每个组件

提问于
浏览 次
0

我正在使用React，并希望更新状态中的对象数组 . 互联网的总体答案是使用类似的方法：

const newState = this.state.elements.slice().concat({key: 'val'});
this.setState({elements: newState});

但是我在这个问题上遇到的问题是，当这些数据绑定到渲染函数和组件时，它会重新渲染每个组件 .

示例include（映射用于lodash以在映射时检索索引）：

render() {
  return (
    <div>
      {map(this.state.elements, (el, index) => <Component key={`el-${index}`} el={el} />)}
    </div>
  );
}

即使数组顺序没有改变，组件的键也没有改变，每次状态改变时，它都会重新渲染并从头开始安装组件 .

这个问题是否有可能的最佳实践解决方案？

最好的，Y

reactjs

1 回答

  • 2

    发生的事情是，当你调用setState时，React Virtual Dom会传递状态并再次调用渲染 . 渲染调用Map函数，该函数渲染每个组件 . 由于父组件发生更改，因此会丢弃并重绘每个组件 .

    这是React的正常和预期行为 . 它正在做你所要求的，你改变了状态，它重绘了组件 .

    但是你的问题是如何在没有重绘的情况下将我的新组件附加到组件列表中？

    我认为问题在于你依赖于react的唯一键作为数组项的索引 .

    <Component key={`el-${index}`}

    每次更新状态时，这将永远改变 . 您需要做的是使用名称，字符串或生成的键或数据中的内容 .

    您只使用map函数索引值，当然在向列表中添加新元素后会触发重新渲染，因为每个元素的键值都已更改 .

    如果你做了这样的事情：

    <Component key={`el-${item.id}`}

    其中item id是一个常量但唯一的值，就像数据库表中的主键一样 . 它不会重绘 . 密钥应具有确定性值 .

    有关更多详细信息，请参阅React Docs和其他post .

    回复于

相关问题