我正在使用REACT和REDUX-TOOLKIT进行前端开发. 当我try 映射()对象内部的数组时,整个屏幕都变成空白. 这是我从Redux State得到的数据 struct . data structure image个 这是我从Reduxstore 调用状态的屏幕:

const { id } = useParams();
  const { mocktest, isLoading, isError, message } = useSelector(
    (state) => state.mocktest
  );
  console.log(mocktest);
useEffect(() => {
    if (isError) {
      toast.error(message);
    }
    dispatch(getMockTestById(id));
  }, [isError, message, dispatch, id]);

这是我的切入点:

export const getMockTestById = createAsyncThunk(
  'mocktest/getMockTestById',
  async (id, thunkAPI) => {
    try {
      // const token = thunkAPI.getState().auth.user.token;
      return await mockTestServices.getMockTestById(id);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) 
        error.message 
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

以下是我try 映射()或访问数据的方式:

{mocktest.questionSet.map((qSet) => (
                    <h4 className="text-center">{qSet.setName}</h4>
                  ))}

这就是我期望在h4标记中显示的setName 我也试过添加这个props .

推荐答案

这里,您遗漏了map函数之前的三元运算符,因为它会验证您映射的数组是否无效.

    {mocktest?.questionSet?.map((qSet) => (
                  <div key={qSet._id} id="body">

Javascript相关问答推荐

如何在JavaScript中在文本内容中添加新行

React:未调用useState变量在调试器的事件处理程序中不可用

对象和数字减法会抵消浏览器js中的数字

我无法在NightWatch.js测试中获取完整的Chrome浏览器控制台日志(log)

如何使用侧边滚动按钮具体滚动每4个格?

模块与独立组件

按下同意按钮与 puppeteer 师

使用i18next在React中不重新加载翻译动态数据的问题

在Vite React库中添加子模块路径

无法读取未定义错误的属性路径名''

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

这个值总是返回未定义的-Reaction

material UI按钮组样式props 不反射

如何在不影响隐式类型的情况下将类型分配给对象?

如何在 Select 文本时停止Click事件?

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

如何通过Axios在GraphQL查询中发送数组

从异步操作返回对象

Reaction路由v6.4+数据API:重试加载程序而不显示错误

如何为Reaction应用程序创建仅登录的路由?