reactjs - 未处理的拒绝(TypeError):getNotes 不是反应中的函数?
问题描述
我正在学习反应,所以我创建了一个简单的应用程序来管理带有标题和描述的笔记。
我在 Note.js 文件中创建了一个 getNotes 函数,并将 getNotes 函数传递给 NoteForm 和 NoteList 组件。
getNotes 在 NoteForm 组件中工作正常,但在 NoteList 组件中不工作。getNotes() 函数用于更新笔记列表。请告诉我为什么 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;
解决方案
function NoteList({notes}, {getNotes}) {
这一定是这样的
function NoteList({notes, getNotes}) {
或者
function NoteList(props) {
...
props.getNotes()
推荐阅读
- python - 在pytorch中创建切片蒙版?
- angular - 如何在不同功能的地图运算符中使用多个 flatMap 响应?
- api - Lua 修复尝试索引 NIL 字段
- bash - 在 bash shell 中解压缩未知 zip 文件后,如何将文件名分配给变量?
- php - 当我的变量中有一个撇号时,它不能用于 onshow
- javascript - 使用 JavaScript 过滤器,如何通过从同一个数组中动态获取月份来编写它?
- c# - 如何将数据查询从用户表单中移开。C#
- html - 在 HTML 和 CSS 中链接变量
- apache - 为什么我的 HTTP 标头只适用于子文档?
- arrays - 使用 Puppeteer 抓取时来自 NodeList 的数组不会出现