Question

我想使用相同的模式对话框进行编辑和添加。我以前使用的是componentWillReceiveProps，并使用props设置了新状态。但是我读到它已被弃用。我尝试使用getDerivedStateFromProps，但其行为有所不同。

我的旧代码如下所示

  componentWillReceiveProps(nextProps) {
    if (nextProps.original) { // Are we editing?
      const item = nextProps.original;
      this.setState({
        name: item.name,
        slug: item.slug
      });
    } else {
      this.setState({ // Fresh
        name: null,
        slug: null
      });
    }
  }

使用上面的代码，每当道具更改时，我都将模态窗口重置为新状态。相同的代码不适用于getDerivedStateFromProps，我唯一的解决方案是在模态组件中添加带有key的{{1}}和模态组件，以便每次打开模态时，都会重置其状态。

我的问题是

如果我使用“ react”：“ 16.8.3”和“ react-native”：“ 0.59.9”，我应该继续使用String(new Date().getTime())吗？
可以通过键重置我的模态吗？如果不是，有什么更好的方法来重置它以进行添加/编辑？

Answer 1

按照宏伟的计划，我认为最好不要采用即将淘汰的方法。您可能可以改用componentDidUpdate()复制相同的行为，该行为捕获prevProps，可用于与新道具进行比较。

  componentDidUpdate(prevProps) {
    if (prevProps.original !== this.props.original) { //update state if different
      const item = this.props.original;
      this.setState({
        name: item.name,
        slug: item.slug
      });
    } else {
      this.setState({ // Fresh
        name: null,
        slug: null
      });
    }
  }

这里还有一个沙箱，供您参考如何从模式内部创建编辑功能：https://codesandbox.io/s/awesome-maxwell-qh76t

使用相同的React组件进行添加和编辑

我的问题是

1 个答案: