在React中如何显示API获取的控制台可打印但页面不展示的数据

问题定位 #

• 核心问题是接口返回的结构和你赋值的逻辑不匹配：接口返回的data是一个外层包装对象，你要渲染的列表数据实际存放在该对象的data属性内，你直接把外层对象赋值给todos，非数组类型自然无法调用map方法渲染。
• 额外说明：setTodos是React的异步更新API，执行赋值后立刻打印todos拿到的还是当前渲染周期的旧值，属于正常现象，不代表赋值操作失败。

修复方案 #

调整赋值逻辑，取接口返回的内层数组赋值给todos即可，修改后代码如下：

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

function App() {
  // 初始值设为空数组可以省略后续的可选链判断
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const GetTodos = async () => {
      try {
        const res = await axios.get("api/orders");
        // 取内层数组赋值
        setTodos(res.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    GetTodos();
  }, []);

  return (
    <div className="App">
      <h1>hello</h1>
      {todos.map((todo) => (
        <p key={todo.ID}>{todo.ID}</p>
      ))}
    </div>
  );
}

修改完成后页面即可正常渲染列表内容。

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