Javascript 将输入值放入数组对象

我有两个部分。一个组件呈现“标题”输入

另一个组件使用两个按钮呈现“note”输入

我将标题输入值存储在名为“title”的状态中

我将note输入值存储在名为“note”的状态中

现在，我尝试在一个对象中获取标题和注释值，如下所示：

const [completedNote, setCompletedNote] = useState([{ id=1, title: "", note=""}])

//应用程序组件

import React, { useState } from "react"
import NoteTitle from "./components/note-title/NoteTitle";

export default function App() {
  const [title, setTitle] = useState("");
  const [note, setNote] = useState("");
  const [completedNote, setCompletedNote] = useState([
    { id: 1, title: "", note: "" },
  ]);

  return (
    <NoteTitle
      title={title}
      setTitle={setTitle}
      note={note}
      setNote={setNote}
    />
  );
}

---

提前谢谢

您的

setCompletedNote

函数缺少最后一个右括号

）

您应该传入用大括号括起来的arrow函数，以防止出现无限循环：

setCompletedNote({
（prevState）=>({
标题：{
…prevState.title，
[标题]：标题，
注:{
…请注意，
[注]：注
}
}
})
})

如果您只想添加新的已完成注释，则

注意：使用类似于生成id的库，但不要像下面这样做：）

如果要更新现有已完成注释的标题和注释，则需要

id

、

newTitle

和

newNote

值。更新与输入id匹配的对象的值

const updateCompletedNote=（id，newTitle，newNote）=>{
setCompletedNote（（prevState）=>prevState.map（n）=>{
如果（n.id==id）{//匹配此处的id
return{…n，title:newTitle，note:newNote}；//返回新对象
}
return n；//不匹配id的对象按原样返回
});
}

您也可以只更新

note

或只更新

title

，但您始终需要对象的

id

假设您只想更新对象的标题，则需要

id

和

newTitle

并返回

return{…n，title:newTitle}

而不是

return{…n，title:newTitle，note:newNote}
请发布完整的代码。您的
completedNote
是[]，但您试图设置的是一个对象。我已使用所有代码更新了线程。我希望能够将输入框中的值添加到我的对象中。我将输入框中的值设置为状态，只需将这些值放入我的对象中。我对此有点困惑。如果这有帮助的话，我发布了我的完整项目。您的完整项目代码不会在任何地方使用
completedNote
。我假设您正在尝试构建类似于todo应用程序的东西。您从用户处获取
标题
和
注释
，一旦他们提交，您就可以使用自动生成的
id
将其添加到
completedNote
。但是如果不是这样的话，你可以评论什么是
completedNote
，并详细描述一下你的项目。是的，这是正确的。基本上，当用户点击submit按钮时，我希望将输入的值存储在对象数组中。（就像google keep是如何工作的）现在，completedNote在我的App.js组件中，如果你仔细看的话，哈哈，如果它太乱了，我道歉！单击submit按钮并获得包含对象中输入的值后，我将映射到我的对象数组并显示下面的各个注释。如果你看一下google keep，你会更好地理解我的意图。嘿，我对答案做了一些修改。据我所知，您只需要
addCompletedNote
函数。但尝试添加编辑注释功能，尝试使用
updateCompletedNote
函数，并尝试实现删除注释作为一种实践：）
import React, { useState } from "react";
import Note from "../note/Note";

export default function NoteTitle({ title, setTitle, note, setNote }) {

  return (
    <>
      <div className="note-maker__maincontainer">
        <div className="note-maker__sub-container">
          <div className="note-maker__input-container" ref={wrapperRef}>
            <div className="note-maker__title">
              <input
                id="input_title"
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Title..."
                onClick={() => setIsNoteDisplayed(true)}
              />
            </div>
             <Note note={note} setNote={setNote} /> 
          </div>
        </div>
      </div>
    </>
  );
}

import React from "react";
export default function Note({ note, setNote }) {
  return (
    <>

      <div className="note__container">
        <div className="note-maker__note">
          <input
            id="input_note"
            type="text"
            value={note}
            onChange={(e) => setNote(e.target.value)}
            placeholder="Take a note..."
          />
        </div>

        <div className="note-maker__buttons-container">
          <button className="note-maker__submit-button" type="submit">
            Submit
          </button>
          <button className="note-maker__close-button">Close</button>
        </div>
      </div>
    </>
  );
}

 setCompletedNote((prevState) =>({
    title:{
      ...prevState.title,
      [title]: title,
      note:{
        ...prevState.note,
        [note]: note
      }
    }
  }))

// You have to initiate just an empty array
const [completedNote, setCompletedNote] = useState([]);

// Call this function on submit
const addCompletedNote = () => {
  // TODO: validate note and title are not empty
  
  // Add new object to state
  setCompletedNote((prevState) => [
        ...prevState,
        { id: Date.now(), note: note, title: title }
      ]);


  // Clean up existing state
  setTitle("");
  setNote("");

  // Note: this above clean-up triggers state updates 2 times which is not that good but works :) . 
  // TODO: so try to solve it by combining title, note and completedNote to be a single state object
  // like this => { title: "", note: "", completedNote: [] } 
  // This above change requires a lot of extra changes to work (Try figuring them out :))
}