Javascript 如何在react中的表中添加新的可编辑文本字段行？

如何在react中的表格中添加新的可编辑文本字段行？ 每当我添加时，单击add按钮，它只会添加一个默认情况下不可编辑的新表行。逻辑是在add addNewUserHandler中定义的，它应该添加新的文本字段行，而只是添加不可编辑的表行

import React，{useState}来自“React”；
从“@material ui/core”导入{Table}”；
从“@material ui/core”导入{Paper}”；
进口{
桌面，
表体，
TableCell，
TableRow，
按钮
制作风格，
偶像
工具提示，
文本字段
}来自“@材料界面/核心”；
从“@material ui/core/InputBase”导入InputBase；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/Add”导入AddIcon；
从“@material ui/icons/Check”导入CheckIcon；
从“@material ui/core/Fab”导入晶圆厂；
从“@material ui/icons/Search”导入SearchIcon；
从“@material ui/icons/Close”导入CloseIcon；
从“@material ui/icons/Edit”导入编辑图标；
const useStyles=makeStyles（主题=>({
根目录：{
宽度：“100%”
},
论文：{
marginTop：主题。间距（3），
宽度：“100%”，
overflowX:“自动”，
marginBottom：主题。间距（2）
},
表:{
最小宽度：650
}
}));
const Userdata=（）=>{
const[data，setdata]=useState([
{
id:1，
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
},
{
id:2，
名称：“冰淇淋三明治”，
卡路里：237，
fat:9.0，
碳水化合物：37，
蛋白质：4.3，
},
{id:3，名称：“Eclair”，卡路里：300，脂肪：7.0，碳水化合物：67，蛋白质：4}，
{
id:4，
名称：“天鹅绒蛋糕”，
卡路里：237，
脂肪：2.5，
碳水化合物：17，
蛋白质：3，
}
]);
常量[editingIndex，setEditingIndex]=useState（-1）；
const addNewUserHandler=（）=>{
设newData=[{
id:“”，
姓名：“，
卡路里：“，
脂肪：“，
碳水化合物：“，
蛋白质：“
}];
常数数据=数据；
console.log（newData）
setdata（[…数据，新数据]）
};
const addNewData=e=>{
控制台日志（e）；
};
常量startEditing=i=>{
设置编辑索引（i）；
};
常量停止编辑=（）=>{
设置编辑索引（-1）；
};
常量inputChangeHandler=（e，i）=>{
让结果=data.map（（数据）=>{
return data.id==i？{…data[e.target.name]：e.target.value}:{…data}
})
设置数据（结果）
}
常量submitInputHandler=（）=>{
设置编辑索引（-1）；
};
const deleteRowHandler=id=>{
常数温度=[…数据]；
常量过滤器数据=临时过滤器（数据=>data.id！==id）；
setdata（[…filteredData，]）；
};
const classes=useStyles（）；
返回(
身份证件
甜点（100克）
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
{data.map（（数据，id）=>(
{editingIndex==data.id(
inputChangeHandler（e，data.id）}
值={id+1}
/>
) : 
(
{id+1}
)}
{editingIndex==data.id(
inputChangeHandler（e，data.id）}
name=“name”
值={data.name}
/>
) : (
{data.name}
)}
{editingIndex==data.id(
inputChangeHandler（e，data.id）}
name=“卡路里”
值={data.carries}
/>
) : (
{data.carries}
)}
{editingIndex==data.id(
inputChangeHandler（e，data.id）}
name=“fat”
值={data.fat}
/>
) : (
{data.fat}
)}
{editingIndex==data.id(
inputChangeHandler（e，data.id）}
name=“carbs”
值={data.carbs}
/>
) : (
{data.carbs}
)}
{editingIndex==data.id(
inputChangeHandler（e，data.id）}
name=“蛋白质”
值={data.protein}
/>
) : (
{data.protein}
)}
{editingIndex！==data.id(
startEditing（data.id）}style={{cursor:“pointer”}}/>
) : (
)}
{editingIndex！==data.id(
deleteRowHandler（data.id）}style={{cursor:“pointer”}}/>
) : (
)}
))}
{/* 
*/}
);
};
导出默认用户数据尝试在addNewUse中使用新数据
let newData = {
      id: "",
      name: "",
      calories: "",
      fat: "",
      carbs: "",
      protein: ""
    };

const addNewUserHandler = () => {
    let newData = [
      {
        id: Math.ceil(Math.random() * 9999),
        name: "",
        calories: "",
        fat: "",
        carbs: "",
        protein: ""
      }
    ];
    const Data = data;
    startEditing(newData.id)
    setdata([...Data, newData]);
  };