如何在useState中存储API返回的多个响应值？

你的代码存在三个核心问题：

• 调用secondApi时没有传递第一个API返回的label和inputVal参数，导致第二个API无法完成验证逻辑
• 更新inputVal状态时，每次都直接赋值为[res.data.body.msg]，会覆盖之前的数组内容，最终只保留最后一次的响应
• useState的更新是异步的，直接在setInputVal后console.log(inputVal)无法获取最新状态值

修复后的代码示例 #

const [inputVal, setInputVal] = useState([]);

async function firstApi() {
  try {
    const res = await axios.post('first_api_url', { title: "title" });
    if (res?.data?.body) {
      // 收集所有第二个API的Promise实例
      const validationPromises = res.data.body.map((item) => secondApi(item));
      // 等待所有验证请求完成，统一获取所有响应结果
      const allResults = await Promise.all(validationPromises);
      // 过滤无效结果后更新状态
      setInputVal(allResults.filter(msg => msg));
    }
  } catch (err) {
    console.error('第一个API调用失败:', err);
  }
}

async function secondApi(item) {
  try {
    const res = await axios.post('second_api_url', {
      titleSecondApi: "titleSecondApi",
      // 传递第一个API返回的标签与输入值，满足验证需求
      label: item.label,
      inputVal: item.inputVal
    });
    return res.data.body.msg || null;
  } catch (err) {
    console.error('验证API调用失败:', err);
    return null;
  }
}

关键改进点 #

• 传递验证参数：给secondApi传入第一个API返回的item，将label和inputVal作为请求参数传给第二个API，匹配业务验证逻辑
• 批量处理异步请求：用map生成所有验证请求的Promise，通过Promise.all等待所有请求完成后，一次性更新状态，减少组件重渲染次数
• 状态更新逻辑修正：如果需要实时追加结果而非批量更新，可改用函数式更新确保基于最新状态修改：

  setInputVal(prev => [...prev, res.data.body.msg]);
  

• 错误处理：添加try/catch捕获API调用异常，避免请求失败导致代码阻塞
• 正确查看状态：useState更新异步，若需查看最新inputVal，可通过useEffect监听：

  useEffect(() => {
    console.log('最新验证结果:', inputVal);
  }, [inputVal]);
  

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