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

【问题标题】：Error:Cannot read property 'map' of undefined REACT JS错误：无法读取未定义的 REACT JS 的属性“地图”
【发布时间】：2021-09-20 20:30:33
【问题描述】：

当我删除一个项目时，它显示无法读取注释，未定义的属性。否则，地图功能正常工作。我认为过滤功能有一些错误。

 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;

这里是创建区域文件，

    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;

这里是注释文件，

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;

【问题讨论】：

标签： javascript arrays reactjs dictionary filter

【解决方案1】：

setNotes 应该返回一个新状态。如果你不返回任何东西。新状态将是undefined。并且会出现这个错误。您可以像这样更新以返回一个新元素：

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

【讨论】：