问题描述
我正在创建一个应用程序,该应用程序用一个使用 React/FastAPI 堆栈的数据库替换了许多未跟踪的 Excel 工作表。
我有一个表单组件,用于将新项目上传到数据库,我希望重用相同的组件来编辑数据库中的项目。因此,我有一个标志 isEdit
,它是从父组件作为道具传递的,以确定它是新条目还是已编辑条目。我在三元表达式中使用 isEdit
来确定是使用合理的默认对象设置状态,还是使用具有我们要编辑的项目描述的值的对象。简而言之,代码如下所示:
const blankItem = ***sensible object***
const editItem = ***object constructed from the data to edit***
(以上构建了我所期望的)
const initValue = isEdit ? editItem : blankItem
const [item,setItem] = useState(initValue)
无论我用哪种方式重构这段代码,无论 isEdit 是 true
还是 false
,item
的初始值 总是 等于 { {1}}。
解决方法
你有没有试过这个:
const [state,setState] = useState(() => {
const initialState = isEdit ? editItem : blankItem
return initialState;
});
initialState 参数是初始渲染期间使用的状态。在随后的渲染中,它被忽略。如果初始状态是昂贵计算的结果,您可以提供一个函数,该函数将仅在初始渲染时执行
来自:https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
,为什么不将项目本身作为道具而不是标志传递?
或者,useEffect
可能有帮助吗?
useEffect(() => {
if (isEdit) {
setItem(editItem)
else {
setItem(blankItem)
}
},[isEdit])