为什么我的 axios 帖子在我的功能组件中返回未定义？

Question

我是Next Js和函数式共生体的新手。我正在尝试从 /api/retrieve2 检索数据

//this is retrieve page

export default function Retrieve() {

    const onSubmit = async data => {        

        const { user } = await axios.post("/api/retrieve2", data);

        console.log(user) // user here is undefined

        };

    return (...);

}

//this is retrieve2, inside the API folder

export default async (req, res) => {

    try {

        const { data } = await axios.post(myBackendUrl, req.body);

        console.log(data) //this is printing the right data - { email: '[e-mail]', code: '123123' }

        res.json(data);

    } catch (e) {

        res.json({ err: e.message || e });

    }

};

我错过了什么，这是关于下一步的东西吗？关于功能组件？

Answer 1

您应该阅读有关 ES6 的信息destructuring你试图去结构，但公理回应女巫是一个对象不包含钥匙useruser因为它有效，因为响应中有一个数据属性data以下是可以取消结构的所有属性：{ data, status, statusText, headers, config, request }

Answer 2

您需要获取完整的URL才能使用getInitialProps发出http请求，这里的Home是您的组件的名称const Home = ({ENDPOINT}) => {   const onSubmit = async data => {                const { data } = await axios.post(`${ENDPOINT}/api/retrieve2`, data);        // consider changing `user` here to `data` since Axios stores response in data object         console.log(data) // should be defined   };   return (...);}Home.getInitialProps = ctx => {  const ENDPOINT = getEndpoint(ctx.req);  return { ENDPOINT };};// You should store this somewhere you can reuse itexport function getEndpoint(req) {  return !!req    ? `${req.headers['x-forwarded-proto']}://${req.headers['x-forwarded-host']}`    : window.location.origin;}