Question

在React中，我有一个名为“ note”的钩子，在其中设置了创建对象的状态。当我第一次创建卡片时，此对象会加载一些填充信息，然后将该信息加载到“ addNote”中，后者会创建一个新便笺并将其保存在便笺数组中。当我想备份该笔记时，它将运行showCard，这是应该检索该卡片并将其重新加载到表单中的位置。见下文

const [notes, setNotes] = useState([]);
  const [showCreate, setCreate] = useState(false);
  const [note, setNote] = useState({});
  let currentNote = {};

  function toggleCreateCard() {
    setCreate(oldCreate => !oldCreate);
  }
  function addNote(newNote) {
    setNotes(prevNotes => {
      return [...prevNotes, newNote];
    });
  }
  function createNewCard(newItem) {
    setNote({
      header: newItem,
      content: "",
      checklist: [],
      pictures: [],
      dueDate: "",
      comments: []
    });
    toggleCreateCard();
  }
  function showCard(id) {
    currentNote = notes[id];
    setNote(currentNote);
    toggleCreateCard();
  }

我遇到的问题是，让“ currentNote”正确地从notes数组中拉出注释。但是，当我尝试更新笔记状态时，它无法正确加载标题。在创建卡的过程开始时，似乎保留了“ note”的最后状态。

顶部是应该在钩子中加载的对象的示例，底部是实际上在钩子中加载的对象的示例

index.js:27 {header: "test", content: "test1234 test1234 test1234 test1234 test1234 test1…234 test1234 test1234 test1234 test1234 test1234 ", checklist: Array(2), pictures: Array(0), dueDate: "", …}

index.js:27 {header: "test", content: "", checklist: Array(0), pictures: Array(0), dueDate: "", …}

如何获取笔记状态以正确更新？

编辑1（附加信息）：“ createNewCard”和“ showCard”功能由以下两个组件调用：

<Body
        noteList={notes}
        removeCard={deleteNote}
        submitNote={addNote}
        showCard={showCard}
      />
      {showCreate ? (
        <CreateCard
          note={note}
          addNote={addNote}
          createOff={toggleCreateCard}
        />

通常会为“ CreateCard”组件专门加载注释，该组件会调用它，并包括各个表单字段的子组件，以使其更具可读性

  const [loadNote, setNote] = useState({
    header: props.note.header,
    content: props.note.content,
    checklist: props.note.checklist,
    pictures: props.note.pictures,
    dueDate: props.note.dueDate,
    comments: []
  });
  function handleChange(event) {
    setNote(prevNote => {
      return {
        ...prevNote,
        [event.name]: event.value
      };
    });
  }

  function submitNote() {
    props.addNote(loadNote);
    props.createOff();
  }
  return (
    <form
      className="create-card form-styling shadow-15px lato"
      onKeyPress={e => {
        e.key === "Enter" && e.preventDefault();
      }}
    >
      <Title header={loadNote.header} update={handleChange} />
      <Description description={loadNote.content} update={handleChange} />
      <Checklist checklist={loadNote.checklist} update={handleChange} />
      <Pictures pictures={loadNote.pictures} update={handleChange} />
      <DueDate duedate={loadNote.dueDate} update={handleChange} />
      <Fab color="primary" aria-label="add" size="small" onClick={submitNote}>
        <AddIcon />
      </Fab>
    </form>
  );

如果需要更多详细信息，整个项目现在都位于代码沙箱中https://codesandbox.io/s/ideaboard-listing-tool-n0je5?file=/src/components/App.jsx:1263-1539

Answer 1

因此，我显然是围着自己的尾巴跑来跑去。数据本身实际上已经在卡上了，我只是没有调用正确的属性名称，所以我只得到卡的标题，而没有其他信息。因此，所有试图控制登录到卡中的数据的尝试都是没有意义的。我仍然不能说我了解异步功能，但至少我正在获取数据

反应挂钩不更新

1 个答案: