react / functional组件/ props更改/ getDerivedStateFromProps

Question

让我们说我正在做一个简单的CRUD应用程序。我的功能组件基本上只是表单。

• 在CREATE情况下，我通过道具传递一个空对象
• 在UPDATE的情况下，我通过props传递一个带有值的对象（我通过API调用得到了父组件中的数据）

我看起来像这样：

const MyForm = (props) => {

 const [myValues, setMyValues] = useState(props.myValues);
 const [errors, setErrors] = useState(0);
 (...)
}

在UPDATE的情况下，我（当然）运行到安装组件时props.myValues仍然为空的问题，并且当来自父组件的api调用完成时不再设置（更新）因此将表单值保留为空。

使用类组件，我将使用getDerivedStateFromProps（）解决这个问题。在功能组件中有类似的东西吗？或者我从一开始就做错了什么？谢谢你的建议！

Answer 1

是的，你当然可以使用useEffect。

在您的情况下，代码应如下所示：

const MyForm = (props) => {

 const [myValues, setMyValues] = useState(props.myValues);
 const [errors, setErrors] = useState(0);

 useEffect(() => {
   setMyValues(props.myValues);
 }, [props.myValues]);

}

Answer 2

当你写：

const [myValues, setMyValues] = useState(props.myValues);

那么myValues props仅用于初始化myValues状态。丹·阿布拉莫夫在his latest article中提到了这一点。 我会建议： 1.将myValues prop重命名为initialValues 2.提交后调用api，根据结果更改状态。

它看起来像：

const MyForm = (props) => {
  const { initialValues, onSubmit } = this.props
  const [myValues, setMyValues] = useState(initialValues);
  ...
  const handleSubmit = () => {
     // Assume that onSubmit is a call to Fetch API
     onSubmit(myValues).then(response => response.json())
                       .then(updatedValues => setMyValues(updatedValues)) 
  }
}