React中API Fetch返回数据无法存入变量的解决问询

你遇到的undefined问题，本质是异步请求的结果没有被正确捕获，也没有存入可全局访问的状态。下面是具体的修复步骤：

1. 让PostRequest返回异步Promise #

当前PostRequest函数里的fetch是异步操作，但你没有把这个异步任务的Promise返回出去，导致外部调用时拿不到结果。修改如下：

function PostRequest(co2emissions,lightingvalue,heatingvalue,watervalue,multiglazevalue,amount,selects,rooms,heatedrooms,lowlightingvalue){
  const payload={"data":[[1,co2emissions,lightingvalue,heatingvalue,watervalue,multiglazevalue,amount,selects,rooms,heatedrooms,lowlightingvalue]]}
  // 关键：返回fetch的Promise链
  return fetch('url', {
    method: 'POST',
    mode:'cors',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload),
  })
  .then((response) => {
    // 先校验响应状态，避免解析错误的响应
    if (!response.ok) throw new Error(`请求失败：${response.status}`)
    return response.json()
  })
  .then((data) => {
    console.log('API返回数据:', data);
    return data;
  })
  .catch((error) => {
    console.error('请求出错:', error);
    throw error; // 抛出错误让外部处理
  });
}

2. 异步处理请求结果并存入全局状态 #

把Post_Handler改成异步函数，用await获取API返回的评级数据，然后存入你已经在用的MyContext状态中，这样其他组件就能直接访问：

async function Post_Handler()
{ 
  try {
    // 等待API返回结果
    const apiResult = await PostRequest(
      state.co2emissions,
      state.lightingvalue,
      state.heatingvalue,
      state.watervalue,
      state.multiglazevalue,
      state.amount,
      state.selects,
      state.rooms,
      heatedrooms, // 注意：这个变量你当前未定义，要确保它来自state或输入项
      state.lowlightingvalue
    );

    // 这里根据API实际返回的结构提取评级字母，比如假设评级在apiResult.rating里
    const propertyRating = apiResult.rating; // 替换成你实际的字段路径

    // 把评级存入全局上下文状态
    setState(prevState => ({...prevState, propertyRating}));

    // 现在你可以在组件内直接用state.propertyRating，其他组件通过MyContext也能拿到
  } catch (err) {
    console.error('获取评级失败:', err);
    // 这里可以加错误提示给用户，比如弹出提示框
  }
};

3. 额外注意事项 #

• heatedrooms变量问题：当前代码里这个参数没有定义，会导致请求参数错误，要把它加到state里或者从输入控件绑定获取。
• API数据结构适配：你需要根据实际API返回的data结构调整提取评级的代码，比如如果返回的是单个字母，可能是apiResult本身就是字母，或者在apiResult.data[0]里，要对应修改。
• 展示评级：之后在任何使用MyContext的组件里，都可以通过state.propertyRating获取这个评级，直接渲染展示即可。

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