React中array.map is not a function错误解决及相关问题排查

错误原因 #

1. map报错核心问题：你在resetArray里用setArray({ary})把数组包装成了对象，而非直接传入数组。原本array初始值是数组[]，更新后变成{ary: [0,1,...99]}这样的对象，对象没有map方法，自然触发报错；若后续array意外变为undefined，也会出现Cannot read property 'map' of undefined的错误。
2. 控制台日志不稳定：React的setState是异步操作，调用setArray后不会立刻更新array的状态值。你在resetArray和useEffect里立刻console.log(array)，拿到的都是更新前的旧状态，偶尔能看到新数组是因为异步更新刚好完成，多数时候更新未完成所以输出空数组。
3. 日志和错误触发两次：这是React开发环境的严格模式导致的，它会重复执行useEffect、组件渲染等逻辑，目的是检测潜在bug，生产环境下只会执行一次。

修正后的代码 #

import React, { useState, useEffect } from 'react'

const NewArray = () => {
  const [array, setArray] = useState([]);
  
  useEffect(() => {
    resetArray()
  }, [])

  // 监听array变化，查看更新后的真实状态
  useEffect(() => {
    console.log("当前array状态:", array)
  }, [array])
  
  const resetArray = () => {
    const ary = [];
    for(let i=0; i<100; i++){
      ary.push(i);
    }
    // 直接传入数组，而非包装成对象
    setArray(ary);
    console.log("生成的新数组:", ary)
  }
  
  return (
    <>
      {/* 增加数组类型判断，避免非数组状态下报错 */}
      {Array.isArray(array) && array.map((value, index) => (
        <div className='array-bar' key={index}>
          {value}
        </div>
      ))}
    </>
  )
}

关键修正点 #

• 将setArray({ary})改为setArray(ary)，确保state始终保持数组类型。
• 新增监听array的useEffect，用来查看更新后的真实状态，避免异步更新导致的日志偏差。
• 在map前添加Array.isArray(array)判断，即使state意外变为非数组，也不会触发报错。

内容的提问来源于stack exchange，提问作者अंशुल