Question

我有一个Questionnaire对象，可以渲染多个QuestionnaireOption子类。当状态QuestionnaireOption对象中的状态发生更改时，将呈现新的Questionnaire子类。

QuestionnaireOption类保持状态，如果其选择＆＃34;＆＃34;或不。

问题：当我更改父类中的状态以呈现新的＆＃34;选项＆＃34;节点，新节点被分配相同的data-reactid，我希望Option节点重置其内部状态，但它没有被分配一个新的id，并且它包含错误的状态（在这个例子中，{{尽管道具设置了新数据，但仍然在新对象上设置为1}}。

我可以做些什么来解决这个问题？

以下是相关代码：

selected

Answer 1

在你的控制台中你有这个警告：

数组中的每个子节点都应该有一个唯一的“键”支柱。检查App的渲染方法。有关详细信息，请参阅fb.me/react-warning-keys。

^{如果你不这样做，你就不会使用开发版本：你应该解决这个问题。}

React使用两件事来确定渲染之间是否有“相同”：组件类（例如QuestionnaireOption）和关键道具。

如果其中一个与前一个渲染不匹配，则react认为它不同，并重新创建实例^*，并丢弃子树dom。

假设option.name可用于确定相等性，请将代码更改为：

    var currentOptionNodes = currentWizardQuestion.options.map(function(option) {
        var node = (
            <QuestionnaireOption
                name={option.name}
                value={option.value}
                key={option.name}
            />
        );
        return node;
    });

作为参考，reactid是一个实现细节，可能随时更改或删除。

^{*如果您只是更改项目的顺序，它将尝试仅更改性能顺序。目前有一些情况不会发生，所以不应该依赖它。}

React.js在渲染子类时无意中重用了data-reactid

1 个答案: