除非我更改密钥，否则 React 组件不会使用新道具重新渲染答案

【问题标题】：React component not re-rendering with new props unless I change key除非我更改密钥，否则 React 组件不会使用新道具重新渲染
【发布时间】：2018-09-27 11:32:46
【问题描述】：

我正在制作一个显示大量图表的应用程序，因此为了防止不必要的重新渲染，我一直在检查我的组件并查看可以在哪里实现 shouldComponentUpdate 以提高效率。但是在一些更高的组件中这样做之后，我得到了一个关于图形组件本身的奇怪错误。我有这个渲染的通用 <Graph/> 父组件：

render() {
    return(
        <div>
            { this.getGraph() }
        </div>
    );
}

getGraph() 本质上返回这个：

return React.createElement(graphComponentMapping[graphType], {data:this.state.data,...this.state.configuration});

其中graphComponentMapping[graphType] 是<Table/> 组件（或其他各种组件，但我们现在将重点放在表上）。现在在 <Table/> 组件中，我渲染了这个：

return(
    <ReactTable {...this.getParameters()} data={data} columns={columns} />
);

getParameters() 函数本质上只是查看配置属性并获取与 React Table 组件相关的所有属性。

现在，当我最初渲染 <Table/> 时，它具有正确的配置（即，如果我更改初始配置，则表匹配）。但是，当我更新 <Graph/> 父级中的配置道具时，该表不会相应更新。再次调用<Table/> 中的渲染函数，如果我在表格的渲染中打印this.props，我可以看到各种配置属性已更改，例如this.props.defaultPageSize 已从 5 更改为 3，但表格不会重新渲染以反映这一点。即使在浏览器的 React 开发工具中，我也可以看到 props 发生了变化。

如果我使用随机键强制重新渲染元素，例如

return(
    <ReactTable {...this.getParameters()} data={data} columns={columns} key={Math.random()} />
);

然后它可以工作，并且当我传递新的配置道具时表格会更新。为什么收到新的 props 时不更新，只有我强制它完全重新渲染时才更新？

【问题讨论】：

删除动态密钥生成.. 你的shouldComponentUpdate 是什么样的？另外，如果您删除了该方法，您的表格是否会相应更新？
可能是因为一路上shouldComponentUpdates 之一返回false？（你可以记录它们的返回值来检查）
您以defaultPageSize 为例，它可能仅在构造函数中相关，与当前页面大小无关。那么，您能否提供另一个在更改时不呈现的属性？
@NiritLevi 就是这样！一堆 react-table 道具仅在构造函数中设置并且不会更改。因此，除非我完全重新安装它，否则组件不会更新，因此它在构造函数中使用 new 属性进行实例化。如果您想将其发布为我会接受的答案。
@Jayce444 它并不是标题的真正答案，所以我很高兴它成功了。

标签： reactjs redux render rerender

【解决方案1】：

我遇到过这样的问题，但这主要是我的 redux 商店的设置方式。 Redux 对象是基于引用的，因此即使只是更新属性，它也不会告诉我的 React 组件发生了某些变化。为了解决这个问题，我必须创建一个新对象并在那里更新值然后使用它，这解决了这个问题。

这可能是他们键入随机数导致您的整个组件重新渲染的原因。

【讨论】：