setState组件中的setState呈现整个组件

Question

我有一个ant设计模式，我使用setState调用它，它调用一个独立的组件，其中包含一个ant设计表单，该表单在模式主体内呈现，这就是功能组件的样子。

export default function EditTableCell({ record}) {
const [colorSwatch, setColorSwatch] = React.useState(record.color)
const [colorPalletVisible, setColorPalletVisible] = React.useState(false)


if (record === 'add') {
    form.setFieldsValue({
      description: '',
      notes: '',
    })
  }
    
    return (
         <Form>
          <Form.Item
           label="description"
           name="description"
          >
           <Input />
          </Form.Item>
        </Form>


        <Form.Item name="color" noStyle>
          <Avatar
            size={32}
            icon={<FormatPainterFilled />}
            style={{ backgroundColor: colorSwatch }}
            onClick={() => setColorPalletVisible(!colorPalletVisible)}
          />
        </Form.Item>
    )

现在的问题是，每当我调用setColorPalletVisible时，组件都会重新呈现，我输入的初始表单值也会重新出现，这意味着当用户输入表单字段值，然后进行颜色选择时，它就会重新呈现，并且他们会丢失键入的数据。那么如何让它的组件按预期运行呢？

https://ant.design/components/form/

Answer 1

您的组件主体不应该调用任何可能会改变状态和调用重新呈现函数的内容。

每次调用setState方法时，在本例中setColorPalletVisible React都会重新呈现组件。但是，这里有if语句，每次调用组件re-renders (又称setColorPalletVisible )时都会执行该语句。

当record变量的值发生更改时，您需要调用form.setFieldsValue，因此其他突变不应该调用此函数。这称为side effect。

在这里你可以读到Rect提供的钩子来处理这种情况。

https://reactjs.org/docs/hooks-effect.html

简而言之，为了实现基于某些依赖项的副作用，您应该调用useEffect钩子，它将在依赖项数组发生变化后执行代码。

在下面的代码中，仅当record值已更改且等于add时，才会调用form.setFieldsValue。useEffect依赖数组可以为空，只有在组件初始呈现后才会调用回调函数。

​

export default function EditTableCell({ record}) {
  const [colorSwatch, setColorSwatch] = React.useState(record.color)
  const [colorPalletVisible, setColorPalletVisible] = React.useState(false)

  useEffect(() => {
    if (record === 'add') {
      form.setFieldsValue({
        description: '',
        notes: '',
      })
    }
  }, [record])

  return (
     <Form>
        <Form.Item
         label="description"
         name="description"
        >
         <Input placeholder={t.payitemsGroupPage.enterPayitem} />
        </Form.Item>
      </Form>


      <Form.Item name="color" noStyle>
        <Avatar
          size={32}
          icon={<FormatPainterFilled />}
          style={{ backgroundColor: colorSwatch }}
          onClick={() => setColorPalletVisible(!colorPalletVisible)}
        />
      </Form.Item>
  )
}

​