错误：无法读取未定义的 REACT JS 的属性“地图”

Question

When I delete an item, it displays cannot read notes, property of undefined. Otherwise, the map function is working correctly. I think there is some error in the filter function.

 import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {
  const [notes, setNotes] = useState([]);

  function handleClick(note) {
    setNotes(function (prevItems) {
      return [...prevItems, note];
    });
    console.log("Hlllo");
    event.preventDefault();
  }

  function handleDelete(indexItem) {
    setNotes(function (prevItems) {
      notes.filter(function (note, index) {
        console.log(indexItem)
        return (index = indexItem)
      });
    });
  }

  return (
    <div>
      <Header />
      <CreateArea handleClick={handleClick} />
      {notes.map(function (note, index) {
        return (
          <Note
            key={index}
            indexItem={index}
            title={note.title}
            content={note.content}
            delete={handleDelete}
          />
        );
      })}

      <Footer />
    </div>
  );
}

export default App;

Here is the Create Area File,

    import React, { useState } from "react";
    
    function CreateArea(props) {
      const [note, setNote] = useState({
        title: "",
        content: ""
      });
    
      function handleChange(event) {
        const { name, value } = event.target;
        setNote(function (prevValue) {
          return {
            ...prevValue,
            [name]: value
          };
        });
      }
    
      return (
        <div>
          <form>
            <input
              onChange={handleChange}
              name="title"
              placeholder="Title"
              value={note.title}
            />
            <textarea
              onChange={handleChange}
              name="content"
              placeholder="Take a note..."
              rows="3"
              value={note.content}
            />
            <button
              onClick={function () {
                {
                  props.handleClick(note);
                }
              }}
            >
              Add
            </button>
          </form>
        </div>
      );
    }
    
    export default CreateArea;

And here is the Note file,

import React from "react";

function Note(props) {
  return (
    <div className="note">
      <h1>{props.title}</h1>
      <p>{props.content}</p>
      <button
        onClick={function () {
          props.delete(props.indexItem);
        }}
      >
        DELETE
      </button>
    </div>
  );
}

export default Note;

Answer 1

setNotes should return a new state. If you don't return anything. The new state will be undefined . And this error will appear. You can update like this to return a new element:

setNotes(function (prevItems) {
  return notes.filter(function (note, index) {
    console.log(indexItem)
    return index === indexItem
  });
});