如何解决使用三元表达式的输出来反应 useState
我正在创建一个应用程序,该应用程序用一个使用 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])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。