React初始化时setState无法应用API返回的初始状态问题

核心问题1：setTasks的错误用法 #

你的useEffect里setTasks([newTasks,... tasks])写法有误，newTasks本身就是一个数组，这样写会把它作为单个元素塞进新数组，导致最终tasks变成二维数组。而且因为useEffect依赖是空数组，这里的tasks永远是初始的空数组，正确写法应该直接将newTasks赋值给状态。

核心问题2：未捕获的Promise错误 #

getTasks是异步函数，但你没有处理请求失败的情况，一旦axios请求出错，就会抛出未捕获的Promise异常，必须加try/catch捕获错误。

核心问题3：状态更新的异步性 #

如果在getTasks内部直接调用setTasks，不能立刻打印tasks验证状态更新——React的状态更新是异步的，要验证得用useEffect监听tasks的变化。

修复后的完整代码 #

function ToDoList() {
    const [tasks, setTasks] = useState([])

    const getTasks = async () => {
        try {
            const response = await axios.get(endpoint + "/api/task")
            console.log(response)

            if (response.data) {
                // 用map简化数组转换，比for循环更简洁
                return response.data.map(item => ({
                    id: item.id,
                    text: item.task,
                    status: item.status,
                }))
            }
            return []
        } catch (error) {
            // 捕获请求错误，避免未捕获Promise异常
            console.error("获取任务失败:", error)
            return []
        }
    }

    useEffect(() => {
        getTasks().then((newTasks) => {
            // 直接赋值新数组，而非拼接成二维数组
            setTasks(newTasks)
        });
    }, []);

    // 可选：监听tasks变化，验证状态是否更新
    useEffect(() => {
        console.log("当前tasks状态:", tasks)
    }, [tasks])

    // 你的渲染逻辑...
}

另一种方案：在getTasks内部直接调用setTasks #

如果想在getTasks里直接更新状态，写法如下：

const getTasks = async () => {
    try {
        const response = await axios.get(endpoint + "/api/task")
        if (response.data) {
            const newTasks = response.data.map(item => ({
                id: item.id,
                text: item.task,
                status: item.status,
            }))
            // 直接在这里更新状态
            setTasks(newTasks)
        } else {
            setTasks([])
        }
    } catch (error) {
        console.error("获取任务失败:", error)
        setTasks([])
    }
}

useEffect(() => {
    getTasks()
}, [])

注意：调用setTasks(newTasks)后立刻打印tasks还是会显示旧值，这是React状态更新的异步特性导致的，必须通过监听tasks的useEffect查看最新状态。

额外优化点 #

• 用Array.map替代for循环转换数组，代码更简洁易读
• 确保endpoint已正确定义，避免拼接URL时出错
• 确认API返回的status格式与你的组件逻辑匹配

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