React中函数作为Prop传递失效问题求助

我尝试调用从App.js传递到AddNote.js的handleAddNote函数，但在AddNote中引用它时总是报错‘handleAddNote不是一个函数’。试了多种方法，始终遇到该函数未定义或不是函数的错误。教程里说只需在handleSave函数中调用handleAddNote(noteText)，但我无法实现。

相关代码 #

App.js #

import Note from './Components/Note';
import NotesList from './Components/NotesList';
import { useState } from 'react';
import { nanoid } from 'nanoid';

const App = () => {

  const[notes, setNotes] = useState([
    {
      id: nanoid(),
      text: "My first note",
      date: "2/12/2024"
    },
    {
      id: nanoid(),
      text: "My second note",
      date: "2/13/2024"
    },
    {
      id: nanoid(),
      text: "My third note",
      date: "2/14/2024"
    },
    {
      id: nanoid(),
      text: "My fourth note",
      date: "2/15/2024"
  }])

  const addNote = (text) => {
        console.log(text);
  }

  return (
    <div className="container">
      <NotesList notes={notes} handleAddNote={addNote}/>
    </div>
  );
}

export default App;

NotesList.js #

import Note from './Note';
import AddNote from './AddNote';

const NotesList = ({ notes, handleAddNote }) => {
    return (
        <div className="notes-list">
            {notes.map((note)=> 
                <Note id={note.id} text={note.text} date={note.date}/>
            )}

            <AddNote handleAddNote={handleAddNote}/>
        </div>
    );
}

export default NotesList;

AddNote.js #

import { useState } from 'react';

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

    const handleChange = (event) => {
        setNoteText(event.target.value);
    };

    const handleSave = () => {
        console.log({handleAddNote});
        {handleAddNote(noteText)};
    };

    return(
        <div className="note new">
            <textarea 
                onChange={handleChange}
                value={noteText}
                className='new-note'
                rows="8" 
                columns="10" 
                placeholder="Type to add a note...">
            </textarea>

            <div className="note-footer">
                <small>200 remaining</small>
                <button className='save' onClick={(noteText)=>handleAddNote(noteText)}>Save</button>
            </div>
        </div>
    );
}

export default AddNote

解决方案 #

你代码里有两处错误导致了这个问题：

1. handleSave函数中的多余花括号
   在handleSave里调用handleAddNote时，你错误地加了花括号，这会被React当成JSX表达式，但这里是在函数体内部，直接调用函数即可：

const handleSave = () => {
    console.log(handleAddNote);
    handleAddNote(noteText); // 去掉外层的花括号
};

2. 按钮onClick的参数错误
   按钮的onClick回调接收的参数是事件对象，不是你定义的noteText，所以你写的(noteText)=>handleAddNote(noteText)实际上是把事件对象传给了handleAddNote，而不是你的输入文本。正确的写法应该是直接调用handleSave，或者用箭头函数传递noteText：

// 方式一：调用handleSave函数
<button className='save' onClick={handleSave}>Save</button>

// 方式二：直接传递noteText
<button className='save' onClick={() => handleAddNote(noteText)}>Save</button>

修改后的完整AddNote.js代码：

import { useState } from 'react';

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

    const handleChange = (event) => {
        setNoteText(event.target.value);
    };

    const handleSave = () => {
        console.log(handleAddNote);
        handleAddNote(noteText);
    };

    return(
        <div className="note new">
            <textarea 
                onChange={handleChange}
                value={noteText}
                className='new-note'
                rows="8" 
                columns="10" 
                placeholder="Type to add a note...">
            </textarea>

            <div className="note-footer">
                <small>200 remaining</small>
                <button className='save' onClick={handleSave}>Save</button>
            </div>
        </div>
    );
}

export default AddNote

内容的提问来源于stack exchange，提问作者China Sanders