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

Question

我是Next Js和函数式共生体的新手。我正在尝试从 /api/retrieve2 检索数据//this is retrieve pageexport 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 folderexport 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 it

export function getEndpoint(req) {

  return !!req

    ? `${req.headers['x-forwarded-proto']}://${req.headers['x-forwarded-host']}`

    : window.location.origin;

}