MVC架构下React异步获取后端数据返回undefined问题求助

问题根源 #

你当前的代码存在两个致命问题：

• 控制器的getMenu函数没有返回异步操作的Promise，调用后直接返回undefined
• React组件的useEffect里没有等待异步请求完成，就直接把undefined传给了setMenu

第一步：修复控制器代码 #

让getMenu返回整个fetch的Promise链，这样外部才能获取到异步返回的数据：

const headers = (newHeader) => {
  // 修复头部合并的写法，用展开运算符正确合并传入的字段
  return {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
    ...newHeader
  };
}

exports.getMenu = () => {
  // 必须返回fetch的Promise链
  return fetch('/api', {
    headers: headers({"reqType": "get-menu"}),
  })
  .then(response => response.json())
  .then(data => data);
}

第二步：修复React视图代码 #

在useEffect中用async/await处理异步请求，确保拿到数据后再调用setMenu：

import { useState, useEffect } from 'react';
var API = require('../Controllers');

function TakeOrder() {
  // Hooks必须按顺序调用，useState要放在useEffect前面
  const [menu, setMenu] = useState([]);

  useEffect(()=> {
    // 定义异步函数处理请求
    const loadMenu = async () => {
      const fetchedMenu = await API.getMenu();
      setMenu(fetchedMenu);
    };
    loadMenu();
  }, []);

  // 后续渲染逻辑...
}

额外注意事项 #

• React Hooks的调用顺序不能乱，useState必须在useEffect之前声明
• 原控制器的headers函数写法错误，newHeader会被当作一个单独的键名，用...newHeader才能正确合并你传入的reqType头部字段

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