無法讀取未定義的屬性（讀取 *）

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;

我的 Sidebar.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>
        </>
    )
    
}

每當我單擊添加按鈕或任何側邊欄按鈕時，它都會顯示錯誤

未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“標題”）

請幫我解決這個問題

Answer 1

您期望getNotes （可能應該命名為getActiveNote ，恕我直言）在每次notes或currentNoteID更改時重新運行。

為此，您必須將其聲明為回調 ( useCallback ) 並聲明其依賴項。 您還想將結果放在 state 中（ eg: 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]);