Почему мой пост ax ios возвращает undefined в моем функциональном компоненте? - PullRequest
Новая
       3

Почему мой пост ax ios возвращает undefined в моем функциональном компоненте?

0 голосов
/ 07 мая 2020

Я новичок в 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: 'casas@gmail.com', code: '123123' }
        res.json(data);
    } catch (e) {
        res.json({ err: e.message || e });
    }
};

Что мне не хватает, это что-то о Next? О функциональных компонентах?

Ответы [ 2 ]

3 голосов
/ 07 мая 2020

Вы должны прочитать о ES6 destructuring

Вы пытаетесь деструктурировать user, но ответная ведьма ax ios - это объект, не содержащий ключа user

For data это работает, потому что в ответе есть свойство данных

Вот все свойства, которые вы можете деструктурировать: 

{ data, status, statusText, headers, config, request }
1 голос
/ 07 мая 2020

Вам нужно получить полный URL-адрес, чтобы сделать http-запрос для использования getInitialProps, здесь 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;
}
...