在ReactJS中编辑多个输入

我已经开始学习React并尝试制作一本家用书，它基于MDN React教程（）中Todo应用程序的代码

我被困在编辑输入的条目。与todo应用不同的是，我想同时编辑多个输入，并用输入的输入更新这些输入

我很确定editTask（）函数中有错误，但我无法发现错误！我真的很感谢你的帮助

这就是我的代码的样子

import React, { useState } from "react";

export default function Entry(props) {

const[newState, setNewState] = useState({
  entry: "",
  status: "",
  betrag: "",
  kategorie: "",
  datum: ""
});

function handleChange(e) {      
  const value = e.target.value;

  setNewState({
    ...newState,
    [e.target.name]: value
  });
}

function handleSubmit(e) {
  e.preventDefault();
  props.editTask(props.id, newState);
  setNewState("");
  setEditing(false); 
  console.log("newState: " + newState);
  console.log("setNewState: " + setNewState);
  console.log("props.id: " + props.id);
}

return (
  <form onSubmit={handleSubmit}>
    <input 
      id={props.id}
      type="text"
      name="entry"
      value={newState.entry}
      onChange={handleChange}
    />
    <input 
      id={props.id}
      type="text"
      name="status"
      value={newState.status}
      onChange={handleChange}
    />
    <input 
      id={props.id}
      type="text"
      name="betrag"
      value={newState.betrag}
      onChange={handleChange}
    />
    <input 
      id={props.id}
      type="text"
      name="kategorie"
      value={newState.kategorie}
      onChange={handleChange}
    />
    <input 
      id={props.id}
      type="text"
      name="datum"
      value={newState.datum}
      onChange={handleChange}
    />

    <br></br>
    <button
      type="button"
      onClick={() => setEditing(false)}
    >
      Cancel
    </button>
    <button
      type="submit"
    >
      Save
    </button>
  </form>
);
}

import React，{useState}来自“React”；
导出默认功能条目（道具）{
const[newState，setNewState]=useState({
条目：“”，
地位：“，
betrag:“，
kategorie:“，
数据：“”
});
函数handleChange（e）{
常量值=e.target.value；
setNewState({
…新闻状态，
[e.target.name]：值
});
}
函数handleSubmit（e）{
e、 预防默认值（）；
props.editTask（props.id，newState）；
setNewState（“”）；
设置编辑（假）；
console.log（“newState:+newState”）；
log（“setNewState:+setNewState”）；
控制台日志（“props.id:+props.id”）；
}
返回(



设置编辑（假）}
>
取消
拯救
);
}

App.js

import React, { useState } from "react";
import { nanoid } from "nanoid";
import Entry from "./components/Entry";
import Form from "./components/Form2";

function App(props) {

  function editTask(id, newState) {
    const editedTaskList = tasks.map(task => {
      if (id === task.id) {
        //
        const editTask = { id: "todo-" + nanoid(), name: newState.entry, ausgabe_einnahme: newState.status, betrag: newState.betrag, kategorie: newState.kategorie, datum: newState.datum};
        return {...task, editTask}
      }
      return task;
    });
  
    setTasks(editedTaskList);
  }

  const [tasks, setTasks] = useState(props.tasks);
  const taskList = tasks.map(task => (
        <Entry 
          id={task.id}
          name={task.name}
          completed={task.completed}
          key={task.id}
          toggleTaskCompleted={toggleTaskCompleted}
          deleteTask={deleteTask}
          editTask={editTask}

          ausgabe_einnahme={task.ausgabe_einnahme}
          betrag={task.betrag}
          kategorie={task.kategorie}
          datum={task.datum}
        />
      )
  );
  
  return (
    <div className="bilanzo">
      <h1>Bilanzo</h1>
      <div className="overview">
      <p>
        <span><strong>Einnahmen & Ausgaben!</strong></span>
      </p>
      <h2 id="list-heading">{headingText}</h2>
        <ul className="entry">
          {taskList}
        </ul>
      </div>
      <Form addTask={addTask} />
    </div>  
  );
}

export default App;

import React，{useState}来自“React”；
从“nanoid”导入{nanoid}；
从“/components/Entry”导入条目；
从“/components/Form2”导入表单；
功能应用程序（道具）{
函数editTask（id，newState）{
const editedTaskList=tasks.map（task=>{
if（id==task.id）{
//
const editTask={id:“todo-”+nanoid（），名称：newState.entry，ausgabe_einnahme:newState.status，betrag:newState.betrag，kategorie:newState.kategorie，datum:newState.datum}；
返回{…任务，编辑任务}
}
返回任务；
});
设置任务（编辑任务列表）；
}
const[tasks，setTasks]=useState（props.tasks）；
const taskList=tasks.map（task=>(
)
);
返回(
比兰佐

Einnahamen&Ausgaben！

{headingText}

{taskList}

);
}
导出默认应用程序；

我不确定：

return {...task, editTask}

是的，也许应该是：

return {...task, ...editTask}

---

第一个代码段中的

setEditing

是什么？它在任何地方都没有定义。你能再解释一下你的想法吗？有什么错误，意外的行为吗？是的！成功了！多谢各位！但这三个点到底意味着什么呢？我认为这就是所谓的扩展语法：；基本上，我认为这是一种给你一件事的所有条目的方式；在这种情况下，我们会说“将editTask的所有条目添加到我正在创建的对象中”。