ReactFC的FormList怎么动态加载明细数据

要动态加载明细数据，可以使用React的状态来存储明细数据，并在需要加载明细数据时更新状态。以下是一个示例代码：

import React, { useState } from 'react';
import { Form, List, Input, Button } from 'antd';

const DynamicList = () => {
  const [details, setDetails] = useState([]); // 初始化明细数据为空数组

  const addDetail = () => {
    setDetails([...details, { id: Date.now(), value: '' }]);
  };

  const removeDetail = (id) => {
    setDetails(details.filter(detail => detail.id !== id));
  };

  const handleChange = (id, value) => {
    const updatedDetails = details.map(detail => {
      if (detail.id === id) {
        return { ...detail, value };
      }
      return detail;
    });
    setDetails(updatedDetails);
  };

  return (
    <Form>
      <Form.List name="details">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <List.Item key={field.key}>
                <Input
                  value={details.find(detail => detail.id === field.key)?.value}
                  onChange={e => handleChange(field.key, e.target.value)}
                />
                <Button onClick={() => remove(field.name)}>删除</Button>
              </List.Item>
            ))}
            <Button onClick={add}>新增</Button>
          </>
        )}
      </Form.List>
    </Form>
  );
};

export default DynamicList;

在上述代码中，我们使用useState钩子来创建一个名为details的状态，用于存储明细数据。addDetail函数用于在点击"新增"按钮时向details添加一个新的明细数据。removeDetail函数用于在点击"删除"按钮时从details中移除指定的明细数据。handleChange函数用于在输入框的值发生变化时更新对应的明细数据。

在Form.List的render函数中，我们使用fields.map方法来遍历所有明细数据，并将每个明细数据渲染为一个List.Item组件。在输入框的value属性中，我们使用details.find方法来根据明细数据的id找到对应的value值。在输入框的onChange事件中，我们调用handleChange函数来更新明细数据的值。

点击"新增"按钮会通过add方法添加一个新的明细数据，并通过remove方法调用"删除"按钮来移除指定的明细数据