React.FC 动态加载 Form 明细数据 - 示例教程

要动态加载明细数据，可以使用React的state来存储明细数据，并在需要的时候更新state。以下是一个示例：\n\njsx\nimport React, { useState } from 'react';\n\nconst DetailForm = () => {\n const [details, setDetails] = useState([]);\n\n const handleAddDetail = () => {\n // 模拟异步加载明细数据\n setTimeout(() => {\n const newDetail = {\n // 这里可以根据实际情况从API或其他地方获取明细数据\n name: 'Detail 1',\n description: 'This is detail 1',\n };\n\n setDetails(prevDetails => [...prevDetails, newDetail]);\n }, 1000);\n };\n\n return (\n <div>\n <button onClick={handleAddDetail}>Add Detail</button>\n {details.map((detail, index) => (\n <div key={index}>\n <h3>{detail.name}</h3>\n <p>{detail.description}</p>\n </div>\n ))}\n </div>\n );\n};\n\nexport default DetailForm;\n\n\n在上述示例中，我们使用useState来创建一个名为details的state变量，初始值为空数组。然后，我们定义了一个handleAddDetail函数，用于模拟异步加载明细数据并将其添加到details数组中。在按钮的onClick事件中调用该函数。\n\n在return语句中，我们使用map函数遍历details数组，并渲染每个明细数据的名称和描述。\n\n当用户点击"Add Detail"按钮时，handleAddDetail函数会在一段时间后执行，模拟异步加载明细数据。在实际应用中，你可以根据需要从API或其他地方获取明细数据。\n\n每次调用setDetails函数时，React将更新details状态，并重新渲染组件，显示新添加的明细数据。