如何修复React中添加数据后出现的Data.map is not a function错误？

问题根源 #

1. 状态更新错误导致类型异常 #

你的handlePost函数中，data.push(value)的返回值是数组的新长度（数字类型），而非更新后的数组。调用setData(newval)后，data状态会从数组被替换成数字，后续Notesview组件接收的Data是数字，自然无法调用map方法，触发"Data.map is not a function"错误。

2. typeof检测数组显示"object"的原因 #

这是JavaScript的正常特性：数组属于引用类型，typeof运算符对引用类型（除function外）都会返回"object"。如果要准确判断是否为数组，应该使用Array.isArray(data)方法。

修复方案 #

修改handlePost函数，遵循React状态不可变原则，创建新数组来更新状态：

function handlePost(value) {
  // 使用扩展运算符创建新数组，添加新元素
  const newVal = [...data, value];
  setData(newVal);
  console.log(Array.isArray(data)); // 此时会返回true
  console.log(data);
}

关键说明： #

• React状态是不可变的，不能直接用push修改原状态数组，必须通过创建新数组的方式更新状态，保证状态始终为数组类型。
• 你之前尝试的Array.from()无效，是因为当状态已经被改成数字后，Array.from(数字)只会生成对应长度的空数组，无法解决根本问题。

修改后的完整App组件代码 #

import React, { useState } from "react";
import './App.css';
import Input from './Components/Input';
import Navbar from './Components/Navbar';
import Notesview from './Components/Notesview';
import Notesdata from "./Data/Notesdata";

function App() {
  const [data, setData] = useState(Notesdata);

  function handleDelete(id) {
    const newData = data.filter((item) => item.id !== id)
    setData(newData)
  }

  function handlePost(value) {
    const newVal = [...data, value];
    setData(newVal);
    console.log(Array.isArray(data));
    console.log(data);
  }

  return (
    <div className="App">
      <header className="App-header">
        <Navbar />
        <Input data={data} handlePost={handlePost} />
        <Notesview handleDelete={handleDelete} data={data} />
      </header>
    </div>
  );
}

export default App;

（注：建议将Notesview的props参数Data改为小写data，符合JSX变量命名规范）

Notesview组件调整后代码 #

import React from 'react'
import Notescard from './Notescard'
import "../Styles/Notes.css"

const Notesview = ({ data, handleDelete }) => {
  return (
    <>
      <div className='notes'>
        {
          data.map((item) => {
            return <Notescard item={item} handleDelete={handleDelete} />
          })
        }
      </div>
    </>
  )
}

export default Notesview

内容的提问来源于stack exchange，提问作者user17043484