无法对Redux数组中存储的Fetch获取数据执行map遍历

我能通过console.log打印出Redux存储的数组，但执行map遍历时没有任何结果，相关代码如下：

Action Creator代码 #

import { checkStatus, getTours, checkLoading } from "../../features/tourSlice";
   
export const getData = () => {
  return async (dispatch) => {
    try {
      dispatch(checkLoading(true));
      const res = await fetch(`http://localhost:8080/backpack/api/r1/tours`);
    
      if (!res.ok) {
        throw new Error(`Error while connecting with server`);
      }

      const data = await res.json();
      dispatch(checkLoading(false));
      dispatch(getTours(data));
    } catch (error) {
      dispatch(
        checkStatus({
          title: `Error`,
          message: `Servers are down or Error while connecting please try again later`,
        })
      );
    }
  };
};

在App.js中调用 #

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getData());
  }, [dispatch]);
}

组件中获取数据并尝试map #

const data = useSelector((state) => state.Tour.tours);

map代码示例：

<main className="main">
        <div className="card-container">
          {data.map((item) => (
            <div className="card" key={item._id}>
              {console.log(item)}
              <div className="card__header">
                <div className="card__picture">
                  <div className="card__picture-overlay">&nbsp;</div>
                  <img
                    src={`${item.image}`}
                    alt="Tour 1"
                    className="card__picture-img"
                  />

可能的原因及解决方法 #

1. 初始状态不是数组 #

检查tourSlice中的初始状态，tours必须初始化为空数组[]，而非null或undefined。如果初始状态错误，会导致首次渲染时无法执行map，后续数据更新也可能出现渲染异常。

正确的初始状态示例：

const initialState = {
  tours: [],
  loading: false,
  status: null
};

2. 数据结构不匹配 #

确认接口返回的data是否是直接的数组。很多接口会返回包含数组的对象（比如{ tours: [...] }），此时需要在dispatch时提取对应字段：dispatch(getTours(data.tours))，否则state.Tour.tours会是对象而非数组，map自然不会生效。

可以在getData中打印数据结构确认：

const data = await res.json();
console.log('接口返回数据结构:', data);

3. 结合加载状态做条件渲染 #

组件可能在数据加载完成前就完成了首次渲染，此时data可能是空数组或未就绪状态。可以结合Redux中的loading状态做条件渲染，避免无效的map执行：

const data = useSelector((state) => state.Tour.tours);
const loading = useSelector((state) => state.Tour.loading);

if (loading) {
  return <div>加载中...</div>;
}

return (
  <main className="main">
    <div className="card-container">
      {data.map((item) => (
        <div className="card" key={item._id}>
          {/* 组件内容 */}
        </div>
      ))}
    </div>
  </main>
);

4. 检查key值有效性 #

确保item._id是唯一的字符串或数字类型，如果_id存在重复或类型异常，React无法正确识别列表项，可能导致渲染异常。可以尝试将key转换为字符串：key={item._id.toString()}，或更换其他唯一标识字段。

5. 确认组件状态订阅正确性 #

检查组件使用useSelector时是否正确订阅了state.Tour.tours的变化。如果组件使用了React.memo，需确认依赖项配置正确，避免因组件未重新渲染导致map不执行。

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