React报错：无法读取null的map属性及对象不能作为React子元素排查

错误原因1：初始状态为null导致map调用失败 #

组件初始state把task设为null，React第一次渲染时API请求还未完成，此时执行task.map()会抛出“无法读取null的map属性”错误——因为null不是数组，没有map方法。

错误原因2：变量命名冲突（潜在问题） #

你在map里用task作为遍历项的变量名，和外层的task state变量重名，虽不会直接报错，但会降低代码可读性，容易引发混淆。

错误原因3：taskId === 'new'时未处理空状态 #

当taskId为'new'时，getTask直接返回，task保持初始null状态，同样会触发map调用失败的错误。

修复后的代码 #

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

const TaskPage = ({match}) => {
    let taskId = match.params.id
    // 初始状态设为空数组，避免null调用map报错
    let [task, setTask] = useState([])

    useEffect(() => {
        getTask()
    }, [taskId])

    let getTask = async () => {
        if (taskId === 'new') {
            // 处理新建任务场景，设为空数组或其他初始值
            setTask([])
            return
        }

        let response = await fetch(`/task/task/${taskId}/`)
        let data = await response.json()
        setTask(data)
    }

    return (
        <div>
            {/* 遍历项用item命名，避免和state变量task冲突 */}
            {task.map(item => <div key={item.id}>{item.id}</div>)}
            <div>{JSON.stringify(task)}</div>
        </div>
    );
}

额外说明 #

• 初始状态设为[]（空数组）是因为API返回的是数组结构，这样即使请求未完成，task.map()也能正常执行（空数组map会返回空，不会报错）。
• 遍历React列表时必须给每个子元素加key属性（比如key={item.id}），这是React的要求，能提升渲染性能并避免警告。
• 之前遇到的Objects are not valid as a React child错误，本质是你曾尝试直接渲染对象（比如{task[0]}而非{task[0].id}），现在用map遍历数组渲染单个属性，即可解决该问题。

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