使用三元表达式的输出来反应 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])

react-hooks reactjs reactjs