我不断收到此错误：未处理的拒绝（TypeError）：无法读取未定义的属性“数据”答案

【问题标题】：I keep getting this error : Unhandled Rejection (TypeError): Cannot read property 'data' of undefined我不断收到此错误：未处理的拒绝（TypeError）：无法读取未定义的属性“数据”
【发布时间】：2021-09-01 00:56:13
【问题描述】：

我正在尝试注册用户，但每当我注册时，我都会收到错误，与标题中的错误相同。我不确定我是否应该定义数据，但我被困在这里了。

auth/register.js

import axios from 'axios';
import { setAlert } from './alert'; 
import {
    REGISTER_SUCCESS,
    REGISTER_FAIL
} from './types';

// Register User
export const register = ({ name, email, password}) => async dispatch => {
  const config = {
    headers: {
      'Content- Type': 'application/json'
    }
  }

  const body = JSON.stringify({ name, email, password });

  try {
    const res = await axios.post('/api/users', body, config);

    dispatch({
        type: REGISTER_SUCCESS,
        payload: res.data
    })
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: REGISTER_FAIL
    });
  }
}

任何帮助将不胜感激。

【问题讨论】：

哪一行导致错误，payload: res.data 或const errors = err.response.data.errors？
我的猜测是err.response.data.errors，因为catch 会捕获try 中抛出的任何错误，如果它是res.data。
@DrewReese 是的，你的正确
@Phil err.response.data.errors

标签： javascript reactjs authentication

【解决方案1】：

catch 块中的 res.response.data.errors 访问似乎引发了一个新错误，您的 UI 代码未捕获该错误。

虽然您应该努力围绕可能被拒绝的异步逻辑编写防御性 UI 代码，但我建议在此处使用可选链接运算符来迭代错误数组（如果它存在）（即如果您可以深入访问错误对象）。

try {
  const res = await axios.post('/api/users', body, config);

  dispatch({
    type: REGISTER_SUCCESS,
    payload: res.data
  })
} catch (err) {
  err.response?.data?.errors?.forEach(
    error => dispatch(setAlert(error.msg, 'danger'))
  );

  dispatch({
    type: REGISTER_FAIL
  });
}

【讨论】：