TypeError: Невозможно прочитать свойство 'status' из undefined вactjs

Question

Я пытаюсь нажать на / home, если статус == 200 в порядке, но выдает ошибку.

 handleSubmit = (e) => {
   e.preventDefault();
   const form = this.props.form;
     const { password, username } = this.state;
   let data = new FormData(); // creates a new FormData object
   data.append('username', form.getFieldValue('username'));
   data.append('password', form.getFieldValue('password'));
   axios.post('http://127.0.0.1:8000/user/login/', data)
   .then(res=>console.log(res))
   .then(data => { if(data.status == 200){ history.push('/home');}})
   .catch(err=>console.log(err))

 };

Это делает это:

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

TypeError: Невозможно прочитать свойство 'status' из неопределенного

Answer 1

Причина, по которой вы не можете прочитать data.status, заключается в том, что data не определено.

Чтобы получить данные и статус, вам нужно вернуть res, чтобы он был доступен в следующие .then

Изменить это

.then(res=>console.log(res)) // data comes from the return of this function
.then(data => { if(data.status == 200){ history.push('/home');}})

К

.then(res => { 
    console.log(res)
    return res // data comes from the return of res
 }) 
.then(data => { if(data.status == 200){ history.push('/home');}})

Если вы не вернете что-то из .then, следующий .then параметр функции будет неопределенным.

Перефразируя этот ответ

Когда вы возвращаете что-то из обратного вызова then (), это немного волшебно. Если вы возвращаете значение, вызывается next then () с этим значением.

В вашем случае вы возвращаете console.log(res), у которого нет status свойства

Answer 2

Заменить

axios.post('http://127.0.0.1:8000/user/login/', data)
    .then(res=>console.log(res))
    .then(data => { if(data.status == 200){ history.push('/home');}})
    .catch(err=>console.log(err))

на

axios.post('http://127.0.0.1:8000/user/login/', data)
    .then(res => (res.status === 200) && history.push('/home'));
    .catch(err=>console.log(err))

Я бы предложил не использовать ключевое слово data здесь, это создаст неоднозначность, так как в результате вашего API есть ключевое слово data.Старайтесь всегда использовать тройное равенство (===) в js сравнениях.