使用 Strapi API 在 NextJS 应用程序中进行 Axios 请求

Question

我的 NextJS 应用程序有问题。我想在我的网站上创建一个作品集，当我实现新项目时使用 Strapi 添加一些内容。我无法成功从 Axios 中提取数据数组，无法在我的应用程序中使用它。它在我的 GetProjects 函数中被阻止。

这是Page.jsx

import styles from './page.module.css'
import Introduce from './components/Introduce'
import Process from './components/Process'
import Scaling from './components/Scaling'
import Techs from './components/Techs'
import Portfolio from './components/Portfolio'
import Socials from './components/Socials'
import variables from './globals.scss'
import "../../node_modules/bootstrap/scss/bootstrap.scss"

export default function Home() {

  return (
    <main className='container-fluid'>
      <Introduce />
      <Process />
      <Scaling />
      <Techs />
      <Portfolio />
      <Socials />      
    </main>
  )
}

投资组合部分：

import React from "react";
import GetProjects from "./GetProjects.jsx";

function Portfolio() {


    return (

        <div className='vh-100 d-flex align-items-center slide bg-waterblue row justify-content-center'>
            <div className='col-md-5'>
                <h2 className="text-lg-start text-center fw-bold title text-gold">My Portfolio.</h2>
                <p className="text-light text-lg-start text-center fw-semibold">Some images illustrate better
                    than long speaches.
                </p>
            </div>
            <div className="col-md-5">
                <div className="row row-cols-4">
                    <div className="row">
                    <GetProjects />
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Portfolio;

这是 GetProjects.jsx 组件，包括不起作用的功能：

import React from "react";
import axios from "axios";

function GetProjects() {

    async function getData() {
        try {
            const response = await axios.get('http://localhost:1337/api/projects?populate=*');
            const data = response.data.data;
            // console.log(data);

            return (
                <div>
                    {function renderData(data) {
                        data.map(project => {
                            <li>{project.attributes.title}</li>
                        })
                        
                        
                            <div>
                                <ul>
                                    {renderData(data)/* Doesn't works */}
                                </ul>
                            </div>
                        
                    }}

                </div>
            )

        } catch (error) {
            console.error(error); // Don't forget to add "?populate=*" to the API endpoint.
        }
    }

    getData()

}

export default GetProjects;

你有什么建议吗？有什么想法可以提取该数组并在应用程序中使用它吗？

非常感谢！

Answer 1

从表面上看，您需要移动异步函数以将数据获取到 React.useEffect 挂钩中，并将结果传递回某些反应状态。然后使用该状态来渲染列表。

您可以在文档中阅读更多相关信息：https://react.dev/reference/react/useEffect#fetching-data-with-effects

import React from 'react';
import axios from 'axios';

async function getData() {
  try {
    const response = await axios.get('http://localhost:1337/api/projects?populate=*');
    const data = response.data.data;
    // console.log(data);

    return data;
  } catch (error) {
    console.error(error); // Don't forget to add "?populate=*" to the API endpoint.
  }
}

function GetProjects() {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    const runner = async () => {
      const newData = await getData();
      setData(newData);
    };
    runner();
  }, []);

  return (
    <div>
      <ul>
        {data.map((project) => (
          <li key={project?.attributes?.title}>{project?.attributes?.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default GetProjects;