React-Redux应用设置页报错：textarea警告、404及未捕获Promise错误

1. 消除textarea的"prop值不应为null"警告 #

这个警告是React对受控表单元素的基本要求——受控组件的value属性不能是null，必须是字符串类型（哪怕是空字符串）。

你可以从两个方向修复：

• 检查Redux store中用户信息的初始state：如果bio这类对应textarea的字段初始值设为null，直接改成空字符串''；
• 在组件渲染时做兜底处理，确保value永远是字符串：

  <textarea 
    value={user.bio || ''} 
    onChange={handleBioUpdate}
    // 其他属性
  />
  

这样既符合React的受控组件规范，也能彻底消除这个警告。

2. 解决POST 404及"Cannot read property 'errors' of null"错误 #

这两个错误是连锁反应，根源出在请求配置和错误处理上：

核心问题：请求方法用错了 #

Conduit的API文档里，更新用户信息的接口是PUT请求，而不是POST。你现在用POST请求https://conduit.productionready.io/api/user会返回404，因为这个端点只接受PUT方法（POST是用于创建新用户的）。

赶紧把请求方法改成PUT，比如在你的Redux action里：

// 错误写法
axios.post('/api/user', updatedUserInfo)

// 正确写法
axios.put('/api/user', updatedUserInfo)

辅助修复：完善错误处理逻辑 #

当请求返回404时，响应数据可能不是预期的包含errors字段的结构，甚至直接返回null。如果你的代码直接尝试访问response.data.errors，就会抛出Cannot read property 'errors' of null的错误。

你需要在异步请求中添加严谨的错误判断：

try {
  const response = await axios.put('/api/user', updatedUserInfo);
  // 处理成功更新的逻辑
} catch (error) {
  // 先判断响应是否存在，再读取错误信息
  if (error.response?.data?.errors) {
    dispatch(setFormErrors(error.response.data.errors));
  } else {
    dispatch(setFormErrors({ general: '请求失败，请稍后重试' }));
  }
}

或者用then/catch链处理：

axios.put('/api/user', updatedUserInfo)
  .then(res => {
    // 成功逻辑
  })
  .catch(err => {
    if (err.response?.data?.errors) {
      // 处理字段级错误
    } else {
      // 处理通用请求错误
    }
  });

结合你提到之前遇到过类似错误，应该是请求方法或错误处理的问题没彻底解决，这次把请求方法改成PUT，同时补上错误边界的判断，就能一次性解决这两个问题了。

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