使用React useState Hook时报'key'未定义no-undef错误如何解决

错误根因 #

• 变量名拼写不匹配：你在组件顶层通过useState声明的状态变量名为keys，但在返回的JSX中访问的是key[0]，少写了末尾的s，直接触发了no-undef未定义变量报错，该问题和React Hook调用规则无关。
• 初始状态边界缺失：keys的默认值为空数组，接口请求完成前访问keys[0]会得到undefined，会连带触发图片资源加载失败的后续错误。

修复后完整代码 #

import { useState } from 'react';
import axios from 'axios';

function Header() {
    const [keys, setKeys] = useState([]);
    // 注意：如果你的代码里没有定义query变量，还需要补充对应的query声明
    const first = (e) => {
       const result = new Map()
       axios.post('http://localhost:8000/' + query)
       .then(function(response){
         const content = response.data
         // 不需要额外做JSON.parse+JSON.stringify冗余操作，axios会自动解析响应json
         for (let i=0;i<content.data.length;i++){
           result.set(content.data[i].image_id, content.data[i].caption)
        }
         const keyArr = Array.from(result.keys());  
         setKeys(keyArr);
         const valueArr = Array.from(result.values());   
      }).catch(err => {
         console.log("error");
         alert(err);
       });
     };

   const second = () => {}
    

 return (
   <div>
       <button onClick={(e)=> { first(); second(); }}>触发请求</button>
       {/* 变量名修正为keys，加条件判断避免初始状态报错 */}
       {keys[0] && <img src={require(`img/img${keys[0]}.jpg`)} alt="展示图"/>}
   </div>
 );
}

export default Header;

附加优化说明 #

• 移除了冗余的JSON.parse(JSON.stringify(response))操作，axios默认会自动解析JSON格式的响应数据，直接取response.data即可
• 将循环变量声明从var改为let避免变量提升问题
• 给img标签补充了必填的alt属性，避免可访问性告警
• 新增了条件渲染，只有keys[0]存在时才渲染img标签，避免无效资源请求

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