Question

我正在尝试迁移到React 17，我想更改

componentWillMount () {
    this.setState({ model: this.props.formModel })
}

到React 17

componentDidMount () {
    this.setState({ model: this.props.formModel })
}

但是我在componentDidMount

中遇到此错误

请勿在componentDidMount中使用setState

有什么建议吗？

Answer 1

我认为此警告来自ESLint。这是早在componentDidMount中调用setState导致可见的渲染Flash时实施的规则。情况不再如此，因此您只需禁用规则即可。

但是，如果要设置初始状态，则应在构造函数中发生。看到这里：

https://reactjs.org/docs/react-component.html#componentdidmount

您可以立即在componentDidMount（）中调用setState（）。它会触发额外的渲染，但是会在浏览器更新屏幕之前发生。这样可以保证即使在这种情况下render（）将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它经常会导致性能问题。在大多数情况下，您应该可以改为在Constructor（）中分配初始状态。但是，对于模态和工具提示之类的情况，当您需要在渲染取决于其大小或位置的对象之前测量DOM节点时，这是必要的。

Answer 2

我们必须已经了解到两者之间的区别：componentWillMount和componentDidMount

componentWillMount is called before the render and
componentDidMount is much more used to update the dom

componentDidMount is the perfect place to make your setState()
you will rarely need to use componentWillMount for this kind of action.

也许您可以显示更多代码，以便我们了解您为什么出现此错误：

请勿在componentDidMount中使用setState

这可能是因为你的信徒如基督教徒所说

Answer 3

关于为什么不应该在componentDidMount内部调用setState的原因，可以看看React document

您可以立即在componentDidMount（）中调用setState（）。它会触发额外的渲染，但是会在浏览器更新屏幕之前发生。这样可以保证即使在这种情况下render（）将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它经常会导致性能问题。在大多数情况下，您应该可以改为在Constructor（）中分配初始状态。但是，对于模态和工具提示之类的情况，当您需要在渲染取决于其大小或位置的对象之前测量DOM节点时，这是必要的。

您可以像这样在构造函数中通过props设置状态：

class ReactComp(Component):
    constructor(props) {
        super(props);

        this.state = {
            model: props.formModel
        }
    }

但这将在React首次为您安装此组件时起作用。数据更改时，状态将不会反映出来。因此，我改为使用getDerivedStateFromProps，这也是一种推荐的实现方式，因为componentWillMount将在几个发行版中弃用。

class ReactComp(Component):
    constructor(props) {
        super(props);
    }

    static getDerivedStateFromProps(props, state) {
        if (props.formModel !== state.formModel) {
            return {
                formModel: props.formModel,
            };
        }

        // Return null to indicate no change to state.
        return null;
    }

希望有帮助！

Answer 4

您不使用constructor。您可以使用componentDidMount()。

componentDidUpdate()

Answer 5

只需使用

state = ({ model: this.props.formModel })

不需要致电componentDidMount

componentDidMount（）如何执行setState（）

5 个答案: