数据来自api但未在状态中设置

Question

我正在尝试将数据设置为状态，但无法设置以下状态：文件夹hirarachay。 --下一个js

view/src/app/page/WhyChoseUS.js
'use client';
import React, { useState, useEffect } from 'react';
import WhyChooseUsChild from './WhyChooseUsChild';
import { urlApi } from '../url';

const WhyChooseUs = () => {
  const [whyChooseUsData, setWhyChooseUsData] = useState([]);
  const [blogPosts, setBlogPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response1 = await fetch(`${urlApi}/whychooseus/`);
        const whyChooseUsData = await response1.json();

        const response2 = await fetch(`${urlApi}/blog/`);
        const blogPosts = await response2.json();

        setWhyChooseUsData(whyChooseUsData);
        setBlogPosts(blogPosts);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      {isLoading ? (
        <p>Loading data...</p>
      ) : (
       <WhyChooseUsChild data={whyChooseUsData} data2={blogPosts} />
      )}
    </>
  );
};

导出默认WhyChooseUs；

尝试保存到状态并发送到 但没有数据集 我将其调用到 src/layout.js

Answer 1

我会推荐一些东西来帮助追踪这个问题：

1. 验证您的 api 是否按预期工作，并在主机运行时（在本地主机或远程位置）直接使用 Postman 或其他网络客户端来访问它

2. 验证应用程序正在发出请求（如您成功的邮递员尝试中所定义）

3. 验证 fetch 调用的返回值，并确保它已解析数据，并且它不仅仅返回给您一个承诺或其他未执行的内容。