如何处理 React.js 中未知数量的 state 个变量？

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>
  )

当我为对象使用输入标签时，我需要在单击按钮时操作它们。 但是，我不知道有多少个对象，所以我不能使用 state 个变量。 此外，当我更改 object 时，我需要从 object 本身了解信息。整个代码如下。

 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;

如何从数组中到达 object 本身，或者在不知道数据长度的情况下使用 useState hook？ 或者，我可以在 onClick 属性中写 function 的语句吗？ 或者，我可以使用其他任何输入表单来专门到达 object 和更新的字符串吗？ 这个问题可能不清楚，但我将不胜感激任何想法。 谢谢！

Answer 1

您可以使用 object 来处理输入数据

首先使用useEffect设置 state 的初始值

请注意，确保 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)}
 />