未处理的拒绝(TypeError): getNotes不是react中的函数?

Question

我正在学习react，所以我创建了一个简单的应用程序来管理带有标题和描述的笔记。

我在Note.js文件中创建了一个getNotes函数，并将getNotes函数传递给NoteForm和NoteList组件。

getNotes在NoteForm组件中工作良好，但在NoteList组件中不工作。getNotes()函数用于更新Notes列表。请告诉我为什么getNotes()函数不工作在NoteList

Note.js

function Notes() {
const [notes, setNotes] = useState([]);
const getNotes = async () => {
const notesRes = await axios.get("http://localhost:5000/notes/");   
setNotes(notesRes.data);
console.log(notes);
}
useEffect(() => {
getNotes();
}, []);
return (
<div>
<NoteForm getNotes={getNotes} />
<NoteList notes={notes} getNotes = {getNotes}/>

</div>
);
}
export default Notes;

Noteform.js

function NoteForm({ getNotes }) {
const [Title, setTitle] = useState("");
const [description, setDesc] = useState("");

async function saveNote(e) {
e.preventDefault();
try {
const noteData = {
title: Title,
desc: description,
};
await axios.post("http://localhost:5000/notes/", noteData);
getNotes();

setTitle(''); setDesc('');

} catch (err) {
console.error(err);
}
}
return (...);
}
export default NoteForm;

NoteList.js

function NoteList({notes}, {getNotes}) {
//------------Delete-----------
async function delNote (id) {
await axios.delete(`http://localhost:5000/notes/${id}`);
getNotes();

}
//------------Update-----------
const [open, setOpen] = React.useState(false);
const [UpdateTitle, setUpdateTitle] = useState("");
const [UpdateDescription, setUpdateDescription] = useState("");
const handleClickOpen = (title, desc) => {
setUpdateTitle(title);
setUpdateDescription(desc);
setOpen(true);
};
async function updateNote(id, updatetitle, updatedesc ) {
const res = await axios.put("http://localhost:5000/notes/", {id, updatetitle, updatedesc});
handleClose();
getNotes();

}
const handleClose = () => {
setOpen(false);
};

// ---------------------------
function renderNotes() {
return notes.map((note, i) => {
return <div style={{ display:"inline-block",borderStyle: "ridge", padding:"20px", borderEndStartRadius: "50px", borderBlockEndColor:"yellowgreen", borderStartEndRadius:"50px", margin:"10px" }}

key={i}> <b>Title: </b>  {note.title} <br/> 
<b>Description: </b> {note.desc} <br/>

<button onClick = {()=> delNote(note._id) } >Delete</button>
<div>
<Button variant="contained" style = {{ marginTop: "10px"  , padding: "0.5px"}} onClick={()=>handleClickOpen(note.title, note.desc)}>
Edit
</Button>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Update Your Note</DialogTitle>
<DialogContent>
{/* <DialogContentText>
To subscribe to this website, please enter your email address here. We
will send updates occasionally.
</DialogContentText> */}
<TextField
autoFocus
margin="dense"
id="name"
onChange={(e) => {
setUpdateTitle(e.target.value);
}}
value = {UpdateTitle}
label="Title"
fullWidth
variant="standard"
/>
<TextField
autoFocus
margin="dense"
id="name"
onChange={(e) => {
setUpdateDescription(e.target.value);
}}
value = {UpdateDescription}
label="Description"
type="email"
fullWidth
variant="standard"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={()=> updateNote(note._id, UpdateTitle, UpdateDescription )}>Update</Button>
</DialogActions>
</Dialog>
</div>

</div>;

}).reverse();
}
return (
<div>
<div >
{renderNotes()}
</div>
</div>
);
}
export default NoteList;

Answer 1

function NoteList({notes}, {getNotes}) {

这一定是这样的

function NoteList({notes, getNotes}) {

或

function NoteList(props) {
...    
props.getNotes()

Answer 2

您正在错误地解构NoteList组件道具。将其更改为，

function NoteList({ notes, getNotes }) {