React JS中如何在map遍历中使用函数内部定义的接口响应变量

你遇到的报错本质是res是getAllActivities函数内部的局部变量，仅在该函数执行时有效，组件渲染的作用域无法访问该变量。使用React的useState Hook存储返回结果即可在不改动现有业务逻辑的前提下，让数据在组件全局可访问，修改步骤如下：

第一步：引入并定义状态变量 #

从react包中导入useState，在组件顶层定义存储活动列表的状态：

import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { getAllActivityDetails } from 'app/store/activityTracker/activitySlice';

const ActivityLog = () => {
    const dispatch = useDispatch();
    // 新增状态，初始为空数组避免初始渲染报错
    const [activityList, setActivityList] = useState([]);

第二步：请求完成后存储数据 #

拿到接口返回的res后，将需要渲染的列表数据存入状态，原有请求逻辑完全不用改动：

const getAllActivities = async () => {
    const user = await JSON.parse(localStorage.getItem('user'));
    const paramsData = {
        _entity: 'ActivityTrack',
        _select: '*',
        channel: 'KOORS',
        email: user && user.data && user.data.email ? user.data.email : ''
    };
    console.log('Email', user);
    const res = await dispatch(getAllActivityDetails(paramsData));
    console.log('res', res);
    // 新增：将返回的列表存入状态
    setActivityList(res?.data?.data || []);
};

第三步：修改渲染逻辑 #

将模板中map的遍历对象替换为定义的状态变量即可：

<tbody className="bg-white">
    {/* 替换原来的res.data.data为activityList */}
    {activityList.map(log => (
        <tr>
            {/* 原有单元格内容完全保持不变 */}
            <td className="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                <div className="flex items-center">
                    <div className="ml-4">
                        <div className="text-sm font-medium leading-5 text-gray-600">
                            {log.userName}
                        </div>
                        <div className="text-sm font-medium leading-5 text-gray-800">
                            {log.createdAt}
                        </div>
                    </div>
                </div>
            </td>

            <td className="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                <div className="text-sm leading-5 text-gray-800">{log.activityCode}</div>
            </td>

            <td className="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                <div className="text-sm leading-5 text-gray-800">{log.description}</div>
            </td>
        </tr>
    ))}
</tbody>

补充说明 #

• 代码中?.可选链和|| []默认空数组的写法是为了兼容接口返回异常的场景，避免前端渲染报错，你可以根据自己实际的接口返回结构调整取值逻辑。
• 该方案完全保留了你原有请求构造、参数处理的逻辑，仅新增了状态存储的代码，不会影响其他关联功能的正常运行。

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