多次反应 useState 调用给出未定义属性

Question

我正在尝试使用 title 属性实现一个笔记应用程序。我以前让笔记应用程序运行 w/o adding-a-title 功能，但现在我已经集成了它，但我遇到了以下问题：textarea 元素的 return（注释文本本身）未定义，而 input 元素（注释标题）的 return return 是有效标题。

我敢肯定，下面的代码是错误来源的组件 - 该组件是 AddNote。

到目前为止我尝试过的：

使用回调，
在 Chrome

我没试过的：

import React, { useState } from 'react';

const AddNote = ({ handleAddNote }) => {
  const [noteTitle, setNoteTitle] = useState('');
  const [noteText, setNoteText] = useState('');

  const handleSaveClick = () => {
    if ((noteText.trim().length > 0) && (noteTitle.trim().length > 0)) {
      handleAddNote(noteText);
      setNoteText('');

      handleAddNote(noteTitle);
      setNoteTitle('');
    }
  };

  return (
    <div className='note new'>
      <div className="toolbar">
        <button
          className='add-delete-icon'
          onClick={handleSaveClick}
        >+</button>
        <input
          type="text"
          className="note-title"
          placeholder="Add a title..."
          value={noteTitle}
          onChange={
            event => setNoteTitle(event.target.value)
          }
          autoFocus
        />
      </div>
      <textarea
        className="note-text"
        placeholder="Add an idea..."
        value={noteText}
        onChange={
          event => setNoteText(event.target.value)
        }
      ></textarea>
    </div>
  );
};

export default AddNote;

我是不是做错了什么，特别是使用了 useState 的多个实例，即这种“批处理”'setState' 调用的想法？或者更确切地说，问题是否属于 handleSaveClick 匿名函数？

相关组件 - 意思是指 adding-a-title- 功能的组件 - 是 Note 组件 (Pastebin), the NoteList component (Pastebin), and notable the Home component (Pastebin)。

Answer 1

我会说问题出在这里：

const handleSaveClick = () => {
  if ((noteText.trim().length > 0) && (noteTitle.trim().length > 0)) {
    handleAddNote(noteText);
    setNoteText('');

    handleAddNote(noteTitle);
    setNoteTitle('');
  }
};

您正在呼叫 handleAddNote() 两次。这个功能是什么样子的？

Answer 2

查看 code，你应该这样调用 handleAddNote

if ((noteText.trim().length > 0) && (noteTitle.trim().length > 0)) {
    handleAddNote(noteTitle, noteText);
    setNoteText('');
    setNoteTitle('');
  }

handleAddNote 是 Home.jsx 中的 addNote 函数。 addNote 以 title 和 text 作为参数

const addNote = (title, text) => {....}

Answer 3

通过您的更新，您表明您已在 Home 组件中定义了以下函数：

const addNote = (title, text) => {
  const date = new Date();
  const options = { ... };

  const newNote = {
    id: nanoid(),
    title: title, // <--- here
    text: text, // <--- here
    date: date.toLocaleDateString(undefined, options)
  };

  const newNotes = [...notes, newNote];
  setNotes(newNotes);
};

这个 addNote() 函数需要两个参数传递给它，一个 title 和 text 然后在你的 newNote 对象中使用（见 <--- here 上面的评论）。然后你将这个 addNote 函数作为 prop 传递给 NoteList:

<NotesList
  notes={notes}
  handleAddNote={addNote}
  handleDeleteNote={deleteNote}
/>

然后，在 NoteList 内部，您将 handleAddNote（这是对 addNote 函数的引用）传递给 AddNote:

<AddNote handleAddNote={handleAddNote} />

因此，当您在 AddNote 组件中调用 handleAddNote() 时，您正在调用 Home 中定义的 addNote() 函数，它需要在一次调用中通过了你的 title 和 text，如下所示：

const handleSaveClick = () => {
  if ((noteText.trim().length > 0) && (noteTitle.trim().length > 0)) {
    handleAddNote(noteTitle, noteText);
    setNoteText('');
    setNoteTitle('');
  }
};

多次反应 useState 调用给出未定义属性

multiple react useState calls gives undefined property

javascript

ecmascript-6

reactjs

react-hooks

多次反应 useState 调用给出未定义 属性

multiple react useState calls gives undefined property

javascript

ecmascript-6

reactjs

react-hooks

多次反应 useState 调用给出未定义属性