React's setProps(）已弃用警告

React's setProps() deprecated warning

本文关键字：警告 setProps React      更新时间：2023-10-17

在父组件应用程序中，我渲染子组件PersonsTable：

  var App = React.createClass({
    addPerson: function() {
      // building personToAdd object and passing to personsTable...
      this.refs.personsTable.setState({personToAdd: person});
    },
    render: function() {
      return (
        <div>
          <PersonsTable ref="personsTable" />
          ...
        </div>
      );
    },
  });

现在，我通过调用PersonsTable的setState方法来传递一个新对象。如果我调用setProps方法，它会返回一个警告

未捕获的不变冲突：setProps（…）：您在具有父级的组件上调用了setProps。这是一个反模式，因为道具在渲染时会得到反应性更新。相反，更改所有者的render方法，将正确的值作为道具传递给创建它的组件。

如何在不使用setState方法的情况下将这样的对象正确地传递给PersonsTable？

这是完整的代码https://jsfiddle.net/jpt5uy1k/

看起来您正试图通过在引用上调用setState来实现反模式。最好将道具传递给子对象并使用它们。如果您需要状态，请将其设置在父对象中，并将其作为道具传递下去。

    <div>
      <PersonsTable aProp={someCoolInfoOrParentState} />
      ...
    </div>

只有当您出于某种原因需要"伸出援手"并获得实际DOM节点时，才应使用Ref。此外，你通常希望状态在尽可能少的地方，因为它可能很复杂，需要额外的"机器"才能工作。最好将状态保持在一个位置，并通过其他组件将其向下传递。

从中查看https://github.com/reactjs/react-basic:

我们倾向于希望我们的数据模型是不可变的。我们通过线程传递函数，可以将状态更新为顶部的单个原子。

相关文章：