用户注册触发Unhandled Rejection TypeError：无法读取undefined的'data'属性

从你提供的代码可定位到以下3个核心问题：

• Content-Type请求头拼写错误
  代码中请求头写为'Content- Type': 'application/json'，字段名中间多了多余空格，正确写法为'Content-Type': 'application/json'。错误的请求头会导致后端无法识别JSON格式的请求体，参数解析失败直接触发报错。
• 不必要的手动序列化请求体
  axios发送POST请求时，若传入的第二个参数是普通JS对象，会自动序列化为JSON字符串，同时自动设置正确的Content-Type请求头，无需手动做序列化和请求头配置，反而可以避免类似拼写错误的问题。
• 错误捕获逻辑缺少边界判断
  当前catch块直接访问err.response.data.errors，如果请求因为跨域、网络中断、后端服务不可用等情况未收到响应，err.response会是undefined，直接访问属性会触发新的JS错误，导致REGISTER_FAIL的action无法正常派发。

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

// 注册用户
export const register = ({ name, email, password}) => async dispatch => {
  try {
    // 直接传JS对象，axios自动处理序列化和请求头
    const res = await axios.post('/api/users', { name, email, password });

    dispatch({
        type: REGISTER_SUCCESS,
        payload: res.data
    })
  } catch (err) {
    // 逐层判断避免空值报错，不支持可选链可替换为逐层&&判断
    if (err.response?.data?.errors) {
      const errors = err.response.data.errors;
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    } else {
      // 非后端校验错误的场景，统一给出提示
      dispatch(setAlert('注册请求失败，请检查网络后重试', 'danger'));
    }

    dispatch({
      type: REGISTER_FAIL
    });
  }
}

如果修改后仍然存在报错，可通过浏览器开发者工具的「Network」面板查看/api/users请求的响应状态码、返回内容，进一步定位是参数校验问题还是后端接口配置问题。

内容的提问来源于stack exchange，提问作者user14367514