React中useState更新数组不生效？Antd Form.List仅显示1个元素

1. Form.List的initialValue特性：initialValue仅在组件首次初始化时生效，后续即使更新materials，Form.List也不会重新读取这个值来更新列表项。从控制台输出能看到，组件初始化时mat是1个元素，此时Form.List已经加载了这个初始值，后续mat变成2个元素时，Form.List并不会自动同步。
2. 可能的数组结构问题：Antd的Form.List要求数组的每个元素是带唯一标识的对象（默认用id字段），如果你的mat数组元素不符合这个格式，也可能导致渲染异常。

方案一：改用受控模式控制Form.List #

通过Form.List的value和onChange结合Form实例，确保materials变化时列表同步更新：

const ComponentHeader = ({ csp }) => {
  const [materials, setMaterials] = useState(null)
  const [form] = Form.useForm()

  useEffect(() => {
    const { mat } = csp
    console.log('Console...', mat)
    // 直接更新form对应字段的值，同步到Form.List
    form.setFieldValue('materials', mat)
    setMaterials(mat)
  }, [csp, form])

  return (
    <Form form={form}>
      {materials && (
        <Form.List name="materials">
          {(fields, { add, remove }) => (
            // 你的列表项渲染逻辑
            fields.map((field) => (
              <Form.Item {...field} key={field.key}>
                <Input placeholder="材料名称" />
                <Button onClick={() => remove(field.name)}>删除</Button>
              </Form.Item>
            ))
          )}
        </Form.List>
      )}
    </Form>
  )
}

方案二：通过key强制Form.List重新渲染 #

如果不想用受控模式，可以给Form.List添加动态key，当materials变化时强制组件重新初始化，读取新的initialValue：

return (
  {materials && (
    <Form.List
      initialValue={materials}
      key={JSON.stringify(materials)} // 用数组的字符串作为key，变化时触发重新渲染
    >
      {(fields, { add, remove }) => (
        // 你的列表项渲染逻辑
        fields.map((field) => (
          <Form.Item {...field} key={field.key}>
            <Input placeholder="材料名称" />
          </Form.Item>
        ))
      )}
    </Form.List>
  )}
)

额外检查项 #

• 确认mat数组的每个元素是包含唯一标识的对象，比如：

  // 正确格式示例
  const mat = [{ id: 1, name: '材料1' }, { id: 2, name: '材料2' }]
  

  如果你的数组元素没有唯一标识，可以手动添加，或者在Form.List中配置keyName指定其他唯一字段：

  <Form.List
    initialValue={materials}
    keyName="materialId" // 指定你数组元素中的唯一字段名
  >
    {/* ... */}
  </Form.List>
  

内容的提问来源于stack exchange，提问作者letters