reactjs - React - useState 未设置初始值

Question

我正在重构以使用 Hooks，但我遇到了一个非常困惑的墙

我有一个基本的功能组件，如下所示:

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  console.log(value, val); // abc undefined

 return (...)
}

日志返回 abc undefined - 即 value in props 是明确定义的，但是第一个参数从 useState(value) 返回是 undefined
只是为了测试钩子(Hook)是否有效，我尝试了 useState("abc")并且记录 abc正如预期的那样。

我不知道我做错了什么 - 有什么想法吗？

react 版本: 16.8.6
这里的编辑是父组件 - 据我所知，这里没有什么特别的!

<MakeComponent
  path={key}
  value={item[key]}
  info={value}
  update={updateDiffs}
/>

Answer 1

正如评论中提到的那样，useState(initialState) (或者你怎么称呼它)只会使用 initialState在第一次渲染上。

During the initial render, the returned state (state) is the same as the value passed as the first argument (initialState).

( React Docs ，强调我的)
此后，在重新渲染时，useState 函数不会根据传入的 props 的新更改来更改状态。
每次都反射(reflect)更改 value更改，像这样在输入 Prop 上注册效果

export const MakeComponent = props => {
  const { path, value, info, update } = props;

  const [val, setVal] = useState(value);
  useEffect(() => { setVal(value)}, [value] )

 return (...)
}