当数据被修改时，setState不会触发重新渲染

问题描述：

刚刚开始使用React，并且直到此时它一直比较平滑。当数据被修改时，setState不会触发重新渲染

我有一个列表，其中包含X个预定义的项目，这意味着该列表总是呈现给定数量的行。

在列表呈现之前，这些数据是从REST API收集的。数据包含与列表有关的变量，以及包含列表中每个项目的数组。

我选择了简单的路由，因此我使用一个名为'data'的单个JSON对象填充每个组件，其中包含所有必需的东西。

渲染列表看起来是这样的：在的初始状态

dataInt: this.props.data.dataInt || 0, 
dataStr: this.props.data.dataStr || '', 
rows: this.props.data.rows || []

所以我存储我的项目（JSON）阵列：

<MyList data={data} />

然后，在MYLIST的getInitialState列表（父），当我选择呈现列表时，我首先创建一个数组中的所有组件（子项），如下所示：

var toRender = []; 
for(i = 0; i < this.state.rows.length; i++) { 
    toRender.push(<ItemRow data={this.state.rows[i]} />); 
}

然后我渲染这样的：

return (
    <div className="item-container"> 
     <table className="item-table"> 
      {toRender} 
     </table> 
    </div> 
);

MyItem的渲染功能是这个样子：

return (
    <tr> 
     <td>{this.state.dataFromItem}</td> 
    </tr> 
);

现在，让我们说，我想从母公司中修改的子数据，以及我刚从API获得的一些新数据。相同的结构，只是一个字段/列的值发生了变化：

i = indexOfItemToBeUpdated; 
var newRows = this.state.rows; 
newRows[i] = data; // New JSON object with same keys, different values. 
this.setState({ rows: newRows }); // Doesn't trigger re-render 
this.forceUpdate(); // Doesn't trigger re-render

我在做什么错了？

起初我还以为是因为我被包裹在一个渲染MyItem的功能，但由于它呈现初始完全正常渲染，我会认为是可接受的包装。

经过一些测试后，似乎重新呈现父视图，但不是子视图（基于父视图中更新的数据）。

的jsfiddle：https://jsfiddle.net/zfenub6f/1/

你可以把它放在一个jsfiddle或等价物中，因为它不清楚你所拥有的实际结构是什么或者这些部分是如何相互作用的，因为你只包含了几段代码。 – WiredPrairie 2015-04-05 18:15:42

自从我发布以来，我做了一些更改，但同样的问题仍然存在：https://jsfiddle.net/zfenub6f/1/ – Joel 2015-04-05 20:31:18

可以将它最小化为仅仅是特定问题，并使其实际上起作用吗？这里有很多代码，它不适用于jsfiddle。您可能需要为每一行添加一个“密钥”。 http://facebook.github.io/react/docs/multiple-components.html#dynamic-children – WiredPrairie 2015-04-05 20:58:43

答

如果你的孩子正在使用状态和状态不更新，什么道具？它渲染得很好吗？如果父级更改了子级的状态，并且子级未反映该更改，那么这些子级组件很可能需要分配给它们的唯一密钥，这告诉React在父级更新状态时需要更新这些项目。我遇到了类似的问题，儿童内部的道具更新以反映父母，但儿童的状态不会更新。一旦我添加了密钥，解决方案就解决了。为了进一步阅读这个博客，最初向我暗示了这个问题。

http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/

还有从作出反应，说明这种情况的官方文档。

http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

我刚刚更改，以便只有父母使用状态。父母然后使用'行'的状态版本传递给它的子节点。然后，孩子们不会将这个价值存储在他们自己的状态中，他们只会使用道具呈现。现在问题转移了。现在孩子重新渲染，但它重新呈现，仿佛道具是空的。所有呈现的值都是空的。编辑：经过一些额外的调整后，它现在的作品。我想在将来使用状态时我应该更加小心。谢谢你的提示！ – Joel 2015-04-05 22:15:12

答

我想问题可能是你只使用getInitialState为。你正在用传入的道具设置状态。如果孩子得到新的道具，getInitialState将不会再被调用。我总是参考https://facebook.github.io/react/docs/component-specs.html查看所有生命周期事件。尝试使用componentWillReceiveProps(object nextProps)再次设置状态。如果您实际上并不需要state，请删除使用状态并仅使用props，这可能会起作用。

当数据被修改时，setState不会触发重新渲染

相关推荐