如何處理React.js?中未知數量的狀態變量

我正在從服務器獲取數據。我不知道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>
  )

當我對對象使用輸入標記時，我需要在單擊按鈕時操縱它們。然而，我不知道有多少個對象，所以我不能使用狀態變量。此外，當我更改對象時，我需要從對象本身了解信息。整個代碼如下。

 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屬性中編寫函數語句嗎？或者，我可以在輸入表單中使用其他任何東西來訪問對象和更新的字符串嗎？這個問題可能還不清楚，但我非常感謝您的任何想法。謝謝