在下一个 js 中的 getStaticProps 中使用 axios

Question

我有下一个项目。在这个项目中，我使用 axios 发送和接收请求数据。 但是当我在 getStaticProps 函数中使用 axios 时遇到问题，我的 index.js 页面出现错误

这是我的 index.js

 import axios from "axios";

const Home = (props) => {
    console.log(props);
    return <div>d</div>;
};

export async function getStaticProps() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');

    return {
        props: {
            data: res
        }
    };
}


export default Home;

这是我浏览器中的 index.js 页面

如果有人可以帮助我，我将非常感激

Answer 1

这是有效的

 try {
        const result = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
        const data = result.data;
        return {
            props: {
                data: data
            }
        }
    } catch (error) {
        console.log(error);
    }

Answer 2

您应该使用res.data。下次，我建议使用console.log(res) 并查看您收到的对象

Answer 3

在调用返回对象的异步函数时添加JSON.stringify。

尝试像这样修改getStaticProps函数：

export async function getStaticProps() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    const stringRes = JSON.stringify(res);
    return {
        props: {
            data: stringRes
        }
    };
}

或

使用.text() 将响应数据转换为如下文本：

export async function getStaticProps() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1').lean();
   const textRes = await res.text();
    return {
        props: {
            data: textRes 
        }
    };
}

Answer 4

您应该以 json 格式返回响应。我的意思是

export async function getStaticProps() {
    axios.get('https://jsonplaceholder.typicode.com/todos/1').then(response=> response.json()).then(response=> {
 return {
        props: {
            data:response.data
        }
    };
}

}

我希望解决方案有效