React Hooks useState() 与数组 Object

Question

当我创建新的“Todo”并修改字段时没有问题，我的问题是当我单击“显示所有对象”按钮时接收回子数据。

这是一个代码示例来说明我的问题：

const CompoOne = () =>{
  const [todos, setTodos] = useState([])
  const [subject, setSubject] = useState("")
  const [priority, setPriority] = useState("")

  const addTodo = () => setTodos(
     [...todos, { a: "Title", b: "subTitle", c: "content"}]
  )

  return (
        <>
          <InputText
            value={subject}
            setValue={setSubject}
            label="subject field"
          />
          <InputText
            value={priority}
            setValue={setPriority}
            label="priority field"
          />
          <hr />
          <h2>Todo:</h2>
          <hr />
          <button
            onClick={()=>addTodo()}
          >
            add a todo
          </button>
          <>
            {setTodos.map((el,i)=>(
                <CompoTwo
                  todo={el}
                  setTodos={setTodos}
                  todos={todos}
                  key={i}
                />
            )}
          </>

          <button
            onClick={()=>console.log(todos)}
          >
            show all objects
          </button>
        </>
  )
}


const compoTwo = ({ todo, todos, setTodos }) =>{
  const [a, setA] = useState("")
  const [b, setB] = useState("")
  const [c, setC] = useState("")

  const handleChange = (e) =>{
    const {name, value} = e.target
    setTodos((prevState)=>{
      //I would like to update the inside the prevState instance
      const updatedArray = // something like [...prevState, [name]:value]
      // return updatedArray
    })
  }

  return(
    <>
          <InputText
            value={a}
            name="a"
            onChange={(e)=>setA(e.target.value)}
            onBlur={(e) => handleChange(e)}
            label="field A"
          />
          <InputText
            value={b}
            name="b"
            onChange={(e)=>setB(e.target.value)}
            onBlur={(e) => handleChange(e)}
            label="field B"
          />
          <InputText
            value={c}
            name="c"
            onChange={(e)=>setC(e.target.value)}
            onBlur={(e) => handleChange(e)}
            label="field C"
          />
    </>
  )
}

如果我在“添加待办事项”按钮上单击两次并更改其中一个字段的值，我仍将获得默认值

[
  {a: "Title", b: "subTitle", c:"content"},
  {a: "Title", b: "subTitle", c:"content"},
]

我的目的是获取子组件的更新值。

如果你有什么想法...

这是尝试播放的代码沙箱链接

提前致谢

Answer 1

我认为你在为 UseState 和 SetTodos 设置初始值时有问题，你可以参考下面的代码：

const [todos, setTodos] = useState([
{ a: 'Title', b: 'subTitle', c: 'content' },
{ a: 'Title', b: 'subTitle', c: 'content' }
]);
const addTodo = (todo) => {
 setTodos([...todos, todo]);
};

Answer 2

你可以试试这个，希望它能对你的compoTwo有所帮助。

注意：你也可以将 todo 属性值设置为 useState 的初始值。

const compoTwo = ({ todo, todos, setTodos }) =>{
  const [a, setA] = useState("")
  const [b, setB] = useState("")
  const [c, setC] = useState("")

  const handleChange = (e) => {
    const { name, value } = e.target;
    setTodos((prevState) => {
      const temp = [...prevState];
      const find = temp.find((res) => res.id === todo.id);
      if (find) {
        find[name] = value;
        return temp;
      } else {
        return prevState;
      }
    });
  };

  return(
    <>
          <InputText
            value={a}
            name="a"
            onChange={(e)=>setA(e.target.value)}
            onBlur={(e) => handleChange(e)}
            label="field A"
          />
          <InputText
            value={b}
            name="b"
            onChange={(e)=>setB(e.target.value)}
            onBlur={(e) => handleChange(e)}
            label="field B"
          />
          <InputText
            value={c}
            name="c"
            onChange={(e)=>setC(e.target.value)}
            onBlur={(e) => handleChange(e)}
            label="field C"
          />
    </>
  )
}