在ReactJS中使用Axios无法将数据映射到useState的问题求助

核心错误点 #

• API返回数据类型不匹配：你请求的https://jsonplaceholder.typicode.com/todos/2返回的是单个对象（比如{id:2, title: "quis ut nam facilis et officia qui", completed: false}），但你把它赋值给了初始为数组的goals状态，后续调用map方法自然会失败——单个对象没有map方法。
• setState异步特性误解：调用setGoals(res.data)后立即打印goals，此时React还未完成状态更新，所以打印的仍是初始的空数组。
• map函数未返回元素：即便数据是数组，你的map回调里没有返回<h4>{goal.title}</h4>，页面也不会渲染任何内容。
• 条件判断逻辑无效：初始goals是空数组[]，在JavaScript里空数组属于真值，所以goals ? ... : ...永远会走第一个分支，不会显示"Nothing written"。

修复后的代码 #

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

function Goals() {
    const [goals, setGoals] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const getApi = () => {
            // 请求返回数组的接口，确保res.data是数组格式
            axios.get('https://jsonplaceholder.typicode.com/todos')
                .then(res => {
                    console.log('res data :', res.data)
                    setGoals(res.data)
                    setLoading(false)
                })
                .catch(err => { 
                    console.log(err)
                    setLoading(false)
                })
        }
        getApi()
    }, [])

    // 处理加载状态
    if (loading) {
        return <div><h4>加载中...</h4></div>
    }

    return (
        <div>
            {goals.length > 0 ? (
                <>
                    <h4>数据加载完成</h4>
                    {goals.map((goal) => (
                        // 列表渲染必须添加唯一key属性
                        <h4 key={goal.id}>{goal.title}</h4>
                    ))}
                </>
            ) : (
                <div><h4>暂无数据</h4></div>
            )}
        </div>
    )
}

export default Goals

关键修复说明 #

1. 修正API请求：换成返回数组的接口（比如https://jsonplaceholder.typicode.com/todos），确保res.data是数组，这样map方法可正常使用。如果确实需要单个todo数据，应将状态初始值设为null，直接渲染单个对象的属性而非用map。
2. 处理setState异步：若要查看更新后的状态，可通过useEffect监听goals变化，或在组件渲染时打印，不要在setGoals后立即打印。
3. map返回元素：用括号()包裹JSX元素（或显式写return），确保回调返回渲染内容。
4. 添加加载状态：新增loading状态处理请求中的过渡场景，同时用goals.length > 0判断是否有数据，比单纯判断goals更准确。
5. 添加key属性：React列表渲染必须给每个元素添加唯一key，避免控制台警告。

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