如何在React.js中处理未知数量的状态变量

Question

我正在从服务器获取数据。我不知道api中到底有多少项。因此，我在html中使用map方法。下面是返回部分。

if (loading) {
return (
<div>
<div>
<Header />
<Sidebar />
</div>
<h1>LOADING ...</h1>
</div>
);
}
if (error) console.log(error);
return (
<div>
<div>
<Header />
<Sidebar />
<h1>Menu Edit Page</h1>
{edit === false ? (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<td>{item?.name}</td>
{/* Full_Name: { item.name }, 
User_Email: { item.email }  */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => editMenu()}>edit</Button>
</div>
) : (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<input
type="text"
required="required"
placeholder="Edit menu item"
name="age"
defaultValue={item?.name}
onChange={() => itemChange(item?.class, item?.id)}
>
</input>
{/* {item?.name} */}
{/* Full_Name: { item.name }, 
User_Email: { item.email }  */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => saveMenu()}>save</Button>
</div>
)}
</div>
</div>
)

当我对对象使用input标记时，我需要在单击按钮时对它们进行操作。然而，我不知道有多少对象，所以我不能使用状态变量。此外，当我改变对象时，我需要从对象本身了解信息。下面是整个代码。

import React, { useState } from 'react'
import Header from "../Components/common/header/header";
import Sidebar from "../Components/common/sidebar/Sidebar";/// IGNORE THIS PAGE
import useFetch from './useFetch';
import { Button } from 'antd';
function MenuEditer() {
const [newItem, setNewItem] = useState("")
const [edit, setEdit] = useState(false);
const [buttonPressed, setButtonPressed] = useState(false);
const { data, loading, error } = useFetch("http://localhost:3001/category/deneme");
const itemChange = async (clss, id) => {
alert("beginning of the func");
// while(!buttonPressed);
// alert("button pressed");
// if(clss === "category"){
// }
// if(clss === "item"){
// }
}
const saveMenu = async () => {
setButtonPressed(true);
setEdit(false);
}
const editMenu = async () => {
setEdit(true);
}
if (loading) {
return (
<div>
<div>
<Header />
<Sidebar />
</div>
<h1>LOADING ...</h1>
</div>
);
}
if (error) console.log(error);
return (
<div>
<div>
<Header />
<Sidebar />
<h1>Menu Edit Page</h1>
{edit === false ? (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<td>{item?.name}</td>
{/* Full_Name: { item.name }, 
User_Email: { item.email }  */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => editMenu()}>edit</Button>
</div>
) : (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<input
type="text"
required="required"
placeholder="Edit menu item"
name="age"
defaultValue={item?.name}
onChange={() => itemChange(item?.class, item?.id)}
>
</input>
{/* {item?.name} */}
{/* Full_Name: { item.name }, 
User_Email: { item.email }  */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => saveMenu()}>save</Button>
</div>
)}
</div>
</div>
)
}
export default MenuEditer;

如何在不知道数据长度的情况下从数组中访问对象本身，或者使用useState钩子？或者，我可以在onClick属性中编写函数语句吗？或者，我可以为输入表单使用其他任何东西来专门访问对象和更新的字符串吗？这个问题可能不清楚，但如果有任何想法，我将不胜感激。谢谢

Answer 1

您可以使用一个对象来处理输入数据

首先使用useEffect来设置状态的初始值

注意确保HTML输入的属性name与来自的API的属性相同

const [formData, setFormData] = useState({})
useEffect(() => {
const copy = formData
data.forEach((item,index)=> {
copy["item" + index] = {name: item.name, email: item.email}
setFormData(copy)
})
}, [])

然后允许事件处理程序自动处理更改

const itemChange = (event, index) {
const copy = formData
const changedItem = copy["item" + index]
changedItem[event.target.name] = event.target.value
setFormData(copy)

}

在输入元件中

<input
type="text"
required={true}
placeholder="Edit menu item"
name="age"  // make sure the name is same as the property name that comes form the api
value={formData["item" + index].age}
onChange={(e) => itemChange(e, index)}
/>