无法读取未定义的属性(正在读取*)

Question

嘿，我正在学习reactjs，我正在尝试制作笔记应用程序下面给出了我的代码

我的App.js文件

import React , {useEffect, useState} from "react"
import { nanoid } from "nanoid"
import Editor from './Note/Editor'
import Sidebar from "./Note/Sidebar"

function App() {
const [notes , setNotes] = useState(JSON.parse(localStorage.getItem("notes"))||[])
const [currentNoteID , setCurrentNoteID] = useState(false)
useEffect(()=>{
localStorage.setItem("notes" , JSON.stringify(notes))
},[notes])
function createNewNotes(){
const newNotes = {
id: nanoid(),
title:"untitled",
body: "sdasda",
lastModified: Date.now()
}
setNotes(prevNote => [newNotes , ...prevNote])
setCurrentNoteID(newNotes.id)
}
function deleteNote(noteID){
setNotes(prevNote => prevNote.filter(note=> note.id !== noteID ))
}
function getNotes(){
return notes.find((note)=> note.id === currentNoteID)
}
return (
<div className="note">
<Sidebar
notes={notes}
createNewNotes={createNewNotes}
currentNoteID={currentNoteID}
setCurrentNoteID={setCurrentNoteID}
deleteNote={deleteNote}
/>

<Editor
notes={getNotes()}
currentNoteID={currentNoteID}/>


</div>

);
}
export default App;

我的边栏.js文件

import React from 'react'
import './style.css'
export default function Sidebar(props){
return(
<>
<div className='sidebar' >
<div className='sidebar-header'>
<h3>Notes</h3>
<button className='add' onClick={props.createNewNotes} >Add</button>
</div>

{ props.notes.map((note)=>{
return(

<div key={note.id} 
className={`${note.id===props.currentNoteID ? "active" : ""}`} 
onClick={()=>props.setCurrentNoteID(note.id)}
>
<div>
<div className="sidebar-tab">
<div className='sidebar-title'>
<p className='title'>Untitled</p>
<button className='delete' onClick={()=>props.deleteNote(note.id)}>Delete</button>
</div>
<p className='note-preview'>summary of text</p>

</div>
</div>
</div>
)
})}
</div>
</>
)
}

我的Editor.js文件

import React , {useState} from "react";
import './style.css'
export default function Editor(props){
const [edit , setEdit] = useState(props.notes) 
function handleChange(event){
const {name , value} = event.target
setEdit(prevNote=> {
return {
...prevNote,
[name] : value
}
})
}

if(!props.currentNoteID)
return  <div className="no-note">no note active</div>
return(
<>
<div className="main">
<input type="text" className="main-input" name="title" placeholder="Enter title here" value={edit.title} onChange={handleChange}  autoFocus/>
<textarea className="main-textarea" name="body"  placeholder="Type your notes" value={edit.body} onChange={handleChange} />


<div className="preview">
<h1 className="preview-title">{edit.title}</h1>
<div className="main-preview">{edit.body}</div>
</div>

</div>
</>
)

}

每当我点击添加按钮或任何侧边栏按钮时，它都会显示错误

未捕获的类型错误：无法读取未定义(读取"title"(的属性

请帮我解决这个问题

Answer 1

每次notes或currentNoteID更改时，您都希望getNotes(可能应命名为getActiveNote，IMHO(重新运行。

为了实现这一点，您必须将其声明为回调(useCallback(并声明其依赖关系。您还希望将结果置于状态(e.g: activeNote(：

const getActiveNote = useCallback(
() => notes.find((note) => note.id === currentNoteID),
[notes, currentNoteID]
);
const [activeNote, setActiveNote] = useState(getActiveNote());
useEffect(() => {
setActiveNote(getActiveNote());
}, [getActiveNote]);

// ...
<Editor note={activeNote} />

此时，您不再需要<Editor />中的currentNoteID，因为您可以从props.note.id中获得它。

请在此处查看它的工作情况：https://codesandbox.io/s/crazy-glade-qb94qe?file=/src/App.js:1389-1448

注意：<Editor>也需要发生同样的事情，当note发生变化时：

useEffect(() => setEdit(note), [note]);