javascript - 反应 / 功能组件 / 道具改变 / getDerivedStateFromProps
问题描述
可以说我正在做一个简单的 CRUD 应用程序来响应。我的功能组件基本上只是表单。
- 在 CREATE 案例中,我通过 props 传入一个空对象
- 在 UPDATE 情况下,我通过 props 传入一个带有值的对象(我通过 API 调用在父组件中获取了数据)
我看起来像这样:
const MyForm = (props) => {
const [myValues, setMyValues] = useState(props.myValues);
const [errors, setErrors] = useState(0);
(...)
}
在 UPDATE 情况下,我(当然)遇到了这样一个问题,即在安装组件时 props.myValues 仍然为空,并且在父组件的 api 调用完成时没有再次设置(更新),从而使表单值为空.
使用类组件,我会用getDerivedStateFromProps()解决这个问题。功能组件中有类似的东西吗?还是我从一开始就做错了?感谢您的任何建议!
解决方案
是的,您当然可以使用useEffect
.
在您的情况下,代码应如下所示:
const MyForm = (props) => {
const [myValues, setMyValues] = useState(props.myValues);
const [errors, setErrors] = useState(0);
useEffect(() => {
setMyValues(props.myValues);
}, [props.myValues]);
}
推荐阅读
- reactjs - 如何允许用户保存输入以供进一步审查
- typescript - 使用 TypeORM 和带有文件夹路径的 Typescript 时出错
- c++ - 如何从指针的指针向量中获取指针值?
- tensorflow - 如何为时间序列异常检测提供这个 LSTM-AE?
- javascript - PostMan 将 JSON post 请求中的空正文发送到 Express 服务器
- python - 如何保护我的 ren'py 项目不被复制?
- clickhouse - clickhouse 是否提供任何工具,例如 red gate sql toolbelt
- linux - 在 apache 配置中未显示预期输出
- node.js - 为什么我不能将 @bundled-es-modules/chai 别名为 chai?
- python - 在 Matplotlib 中同时使用 blitting 为一个子图设置动画,而在 Matplotlib 中通过重绘为另一个子图设置动画