React useState 踩坑记录

毕业设计用的 React 写的后台管理系统，今天写的时候碰到一个坑。

某组件内部用到了useState这个 hook，state 的初始值是来自于 props 传递。由于用的Ant Design Pro的模版，它的写法看起来很像 state 的值会随着 props 的更新而更新。实际上useState的值是不会变的，除非整个组件被销毁然后再被重新渲染，那就是完全重新生成了一个全新的 State。。。而Ant Design Pro就是用的这个技巧。。。说实话我不是很喜欢这种写法。。有点 magic。。代码如下：

  // 父组件
  stepFormValues && Object.keys(stepFormValues).length ? (
    <UpdateForm
      ...props //省略一些props
      values={stepFormValues} // 这是重点
    />
  ) : null;

  // 子组件
  const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  // useState值来自于props
  const [formVals, setFormVals] = useState<FormValueType>({
    departmentId: props.values?.departmentId ?? '',
    _id: props?.values?._id,
    name: props?.values?.name,
    handler: props?.values?.handler?._id,
  });

  return (
    <Modal>
      <Form
        initialValues={{
          ...formVals,
        }}
      >
        ...
      </Form>
    </Modal>
  );
}

上面的代码借用了stepFormValues的变化，决定是否整个重新渲染UpdateForm，导致了UpdateForm内部的 state 会跟随stepFromValues这个 props 一起变化。。。并且它只是判断stepFormValues是否有内容，至于内容是否发生了变化它并不关系，也就是说如果只是内容发生了变化UpdateForm并不会重新渲染。。。