React.js中如何在Axios函数外部获取响应值

问题原因 #

1. setState异步特性：React的setState是异步批量更新操作，调用setState后不会立刻修改state的值，所以紧接着的console.log(state)输出的还是初始的空数组。
2. useEffect执行时机：依赖为空数组的useEffect仅在组件挂载时执行一次，此时state还未被API响应更新，所以第一次打印的是初始值。

解决方案 #

方案1：在API回调内直接处理数据 #

如果需要在获取到数据后立即操作，直接在then回调里使用res.data，无需等待state更新：

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

function Test() {
    const [state, setState] = useState([]);
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/todos/1`)  
          .then(res => {  
            setState(res.data);  
            // 直接使用响应数据做后续处理
            console.log('API返回数据:', res.data);
            // 如果要传递到组件外部，可调用父组件传入的回调
            // props.onDataLoaded(res.data);
          })  
    }, []);

    return <div>{state.title && <p>任务标题：{state.title}</p>}</div>;
}
export default Test;

方案2：监听state变化获取最新值 #

如果需要依赖更新后的state执行逻辑，添加一个监听state的useEffect：

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

function Test() {
    const [state, setState] = useState([]);
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/todos/1`)  
          .then(res => setState(res.data))  
    }, []);

    // 当state更新时触发此useEffect
    useEffect(() => {
        // 根据数据结构判断是否已获取到有效数据
        if (state.id) {
            console.log('更新后的state:', state);
            // 这里可以执行需要用最新state的逻辑，比如存入全局状态、发送给其他组件等
        }
    }, [state]); // 依赖state变化

    return <div>{state.title && <p>任务标题：{state.title}</p>}</div>;
}
export default Test;

方案3：使用setState的回调函数 #

setState支持第二个参数（回调函数），会在state更新完成后执行：

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

function Test() {
    const [state, setState] = useState([]);
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/todos/1`)  
          .then(res => {
            setState(res.data, () => {
                // 回调内可获取最新的state
                console.log('state更新完成:', state);
            });
          })  
    }, []);

    return <div>{state.title && <p>任务标题：{state.title}</p>}</div>;
}
export default Test;

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