Next.js中API数据无法存入State的问题求助

以下是针对问题的具体排查步骤和解决方案：

• 验证API请求是否正常
  打开浏览器开发者工具的Network面板，查看/whychooseus/和/blog/两个请求的状态码：

  • 若状态码不是200，检查API地址是否正确、后端服务是否正常运行；
  • 点击请求查看Response内容，确认返回的JSON格式符合预期（比如是否直接是数组，还是嵌套在data这类字段中）。
    可以在fetchData函数中临时添加打印语句，确认拿到的数据：

  const fetchedWhyChooseUs = await response1.json();
  console.log('获取到的whychooseus数据:', fetchedWhyChooseUs);
  const fetchedBlogPosts = await response2.json();
  console.log('获取到的blog数据:', fetchedBlogPosts);
  

• 避免变量作用域混淆
  你在fetchData内部声明了与State同名的变量，虽然语法合法，但容易造成逻辑混淆。建议重命名内部变量：

  try {
    const response1 = await fetch(`${urlApi}/whychooseus/`);
    const fetchedWhyChooseUs = await response1.json(); // 重命名变量
  
    const response2 = await fetch(`${urlApi}/blog/`);
    const fetchedBlogPosts = await response2.json(); // 重命名变量
  
    setWhyChooseUsData(fetchedWhyChooseUs);
    setBlogPosts(fetchedBlogPosts);
  }
  

• 确认State更新的异步特性
  setState是异步操作，不要在调用后立刻打印State值验证。可以通过监听State变化的useEffect来确认更新：

  useEffect(() => {
    console.log('更新后的whyChooseUsData:', whyChooseUsData);
    console.log('更新后的blogPosts:', blogPosts);
  }, [whyChooseUsData, blogPosts]);
  

• 检查API基础地址urlApi
  确认../url导出的urlApi是完整有效的地址（比如包含http://或https://，域名、端口正确）。可以直接将拼接后的URL复制到浏览器地址栏，验证是否能返回数据。

• 排除子组件接收问题
  有时候并非父组件State未更新，而是子组件未正确处理数据。可以在父组件中先渲染数据内容，再传递给子组件：

  ) : (
    <>
      {/* 先打印数据确认State是否有值 */}
      <div>whychooseus数据：<pre>{JSON.stringify(whyChooseUsData, null, 2)}</pre></div>
      <div>blog数据：<pre>{JSON.stringify(blogPosts, null, 2)}</pre></div>
      <WhyChooseUsChild data={whyChooseUsData} data2={blogPosts} />
    </>
  )}
  

• 完善错误捕获逻辑
  默认fetch仅在网络错误时抛出异常，若API返回4xx/5xx状态码不会触发catch。需要手动判断响应状态：

  const response1 = await fetch(`${urlApi}/whychooseus/`);
  if (!response1.ok) {
    throw new Error(`请求失败：${response1.status} ${response1.statusText}`);
  }
  const fetchedWhyChooseUs = await response1.json();
  
  // 同样处理response2
  const response2 = await fetch(`${urlApi}/blog/`);
  if (!response2.ok) {
    throw new Error(`请求失败：${response2.status} ${response2.statusText}`);
  }
  const fetchedBlogPosts = await response2.json();
  

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