React组件Uncaught TypeError错误及重复渲染问题咨询

问题1：Uncaught TypeError: Cannot read properties of undefined 错误解决 #

错误原因 #

• 你仅给definition?.hwi加了可选链保护，但后续的prs[0].mw没有逐层处理：如果hwi.prs是空数组或未定义，prs[0]会变成undefined，再访问.mw就触发TypeError。
• 初始状态设为[]，但接口返回的是对象，导致definition.length === 0的判断逻辑失效：对象没有length属性，undefined === 0为false，会跳过Not found分支直接渲染JSX，此时若接口返回的数据结构不完整，就会报错。

解决方法 #

1. 给所有嵌套属性加上完整的可选链保护：

   // 修正读音行的嵌套属性
   <p className="text-2xl font-guyot italic">{definition?.hwi?.prs?.[0]?.mw || ""}</p>
   // 修正释义行的嵌套属性
   <p className="text-4xl font-spaceGrotesk">{definition?.shortdef?.[0] || ""}</p>
   

2. 修正初始状态和空值判断逻辑：
   将初始state改为null，并调整判断条件：

   const [definition, setDefinition] = useState(null);
   
   // 替换原有的空判断
   if (!definition) {
       return <div>Not found</div>;
   };
   

问题2：页面先显示<div>Not found</div>后黑屏 #

原因 #

初始definition是[]，第一次渲染触发definition.length ===0判断，显示Not found；接口请求完成后，setDefinition把对象赋值给definition，此时definition.length为undefined，跳过Not found分支进入主渲染，但因属性缺失触发TypeError，导致组件崩溃黑屏。

解决方法 #

1. 加入isLoading状态判断，在请求过程中显示加载态，避免提前显示Not found：

   if (!dictionarySearch) {
       return <div>Loading...</div>;
   };
   
   if (isLoading) {
       return <div>Loading...</div>;
   };
   
   if (!definition) {
       return <div>Not found</div>;
   };
   

2. 完善请求错误处理，确保出错时definition有合法值：

   const getDef = async () => {
       setIsLoading(true);
       try {
           const res = await axios.get(`https://www.dictionaryapi.com/api/v3/references/collegiate/json/${dictionarySearch}?key=${APIKEY}`);
           // 若接口返回的第一项不存在，设为null
           setDefinition(res.data[0] || null);
       } catch (err) {
           console.error(err);
           setDefinition(null);
       } finally {
           setIsLoading(false);
       }
   }
   

问题3：组件每次状态变更渲染4次 #

这是React开发模式下的正常行为：React的StrictMode会自动执行两次渲染（包括初始化和状态更新），用来检测组件中的副作用问题。生产模式下，这个重复渲染会被移除，渲染次数会恢复到预期值。

如果想在开发阶段验证，可以暂时移除StrictMode（不推荐，它能帮你提前发现潜在问题），或者直接打包生产版本测试，渲染次数会减少。

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