1. ホーム
  2. reactjs

[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。

2022-02-08 04:13:24

質問

status==200 がOKなら /home にプッシュしようとしているのですが、エラーになるんです。

 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' を読み取ることができません。

解決方法は?

交換

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の比較では常にトリプルイコール(===)を使用するようにしてください。