React中如何用state处理Map、数组并实现跨作用域变量传递

• key 变量仅在axios异步请求的then回调作用域内声明，组件渲染的作用域无法访问该变量
• 未通过React state存储请求拿到的图片ID，异步请求返回后无法触发组件重新渲染更新视图
• 你代码中img标签引用的key1没有任何声明，所以直接触发no-undef报错

1. 首先引入React的useState钩子，声明state存储获取到的图片ID数组
2. 在axios请求拿到结果后，将图片ID数组更新到state中
3. 视图层读取state中的值渲染图片，新增条件判断避免初始无数据时报错

修改后完整代码 #

// 首先导入依赖
import React, { useState } from 'react';
import axios from 'axios';

function Header() {
    // 声明state存储图片ID数组，初始值为空数组
    const [imgKeys, setImgKeys] = useState([]);
    // 注意：你代码里的query变量未定义，这里需要你自行补充query的取值逻辑
    const query = 'xxx';

    const first = (e) => {
       var result = new Map()
       axios.post('http://localhost:8000/' + query)
       .then(function(response){
         // 这里不需要反复序列化反序列化，axios会自动解析json
         var content = response.data
         for (var i=0;i<content.data.length;i++){
           result.set(content.data[i].image_id, content.data[i].caption)
        }
         const key = Array.from(result.keys());  
         // 将结果更新到state
         setImgKeys(key);
         // 如果需要value也可以同理声明state存储
         // const value = Array.from(result.values());  
       
      }).catch(err => {
         console.log("error");
         alert(err);
       });
     };

   const second = () => {}
    

 return (
   <div>
       <button onClick={(e)=> { first(); second(); }}>触发请求</button>
       {/* 新增条件判断，有图片ID时才渲染，这里取第一个ID为例，对应你原来的key1需求 */}
       {imgKeys.length > 0 && (
         <img src={require(`img/img${imgKeys[0]}.jpg`)} className='modal_img' alt="展示图"/>
       )}
   </div>
 );
}

export default Header;

• 你原来的JSON.parse(JSON.stringify(response))是冗余写法，axios会自动将接口返回的json数据解析到response.data中，直接读取即可
• require的图片路径要补全后缀名（比如.jpg/.png），否则会找不到资源
• 如果要渲染所有图片，可以直接遍历imgKeys数组生成多个img标签
• 你代码中用到的query变量没有声明，需要自行补充它的赋值逻辑

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