react 踩坑记录

一.子组件更新父组件状态，错误代码如下

  function updateInfo (value, key) {
    console.log('updateInfo内部', info)
    let newInfo = { ...info }
    newInfo[key] = value
    setCateInfo(newInfo) // 父组件传过来的更改状态方法
  }
   return (
    <div>
      <ModalForm
        formRef={form}
        width={500}
        title={title}
        open={flag}
        onOpenChange={onOpenChange}
        onFinish={submitForm}

      >
        <ProFormText label='名称' name="name"
          rules={[{
            required: true,
            message: '请输入名称',
          }]}
          onChange={(v) => updateInfo(v.target.value, 'name')}
        />
        <ProFormText label='key' name='key'
          rules={[{
            required: true,
            message: '请输入key',
          }]}
          onChange={(v) => updateInfo(v.target.value, 'key')}
        />
      </ModalForm>
    </div>
  )

react状态更新是异步的，所以在 updateInfo 函数内部访问的 info 实际上仍然是闭包中的那个旧值，并没有得到及时更新，所以出现了文本框输入的内容无法正确更新的问题。

正确的写法:

  function updateInfo (value, key) {
    setCateInfo(prevInfo => ({
      ...prevInfo,
      [key]: value
    }));
  }