React组件处理Props及使用JSON.parse时出现错误求助

你的错误指向第50行附近的responseSelect.find(o => o.id === id)，结合你说console能正常打印前面的数据，大概率是这行代码里的变量出了问题，下面列几种常见原因和对应解决方法：

1. responseSelect 为 undefined 或 null #

你通过useSelector获取state.responses.responses，如果Redux初始状态里responses.responses没设为空数组，或者异步加载数据前状态是undefined/null，调用find方法就会直接报错。

解决方法：
给responseSelect设置默认空数组，避免调用方法时出错：

// 方式1：在useSelector里加默认值
const responseSelect = useSelector((state) => state.responses.responses) || [];

// 方式2：使用可选链操作符（ES2020+）
let response = responseSelect?.find(o => o.id === id);

2. id 值异常或找不到匹配项 #

虽然你解构时给了id = ''的默认值，但如果后续代码里直接用response的属性（比如response.someKey），而find因为id不匹配返回了undefined，就会触发"Cannot read property xxx of undefined"的错误。

解决方法：
先判断response是否存在，再进行后续操作：

let response = responseSelect?.find(o => o.id === id);

// 找不到对应数据时做兜底处理
if (!response) {
  return <div>未找到对应的响应数据</div>;
}

// 后续正常使用response的属性

额外优化建议 #

• 避免重复调用useSelector：你获取author时两次调用useSelector，可以合并成一次，提升性能：

const topicAuthor = useSelector((state) => state.topics.selectTopic.author);
const storedTopic = localStorage.getItem('topic');
// 同时处理localStorage可能为null的情况
const author = topicAuthor || (storedTopic ? JSON.parse(storedTopic).author : '');

• 给listResponse解构加兜底：虽然你现在能打印，但如果后续接口返回异常，listResponse可能为null，解构response_json_new会报错，可以改成：

const { response_json_new } = listResponse || {};

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