React Redux映射对象内数组时页面空白，如何解决？

我用React和Redux Toolkit做前端开发，尝试映射对象里的数组时整个页面变成空白。

数据结构说明 #

Redux状态中的mocktest是一个对象，内部包含questionSet数组，数组元素带有setName字段。

页面获取状态代码 #

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]);

Slice异步请求代码 #

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);
    }
  }
);

尝试的数组映射代码 #

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

我想让setName显示在h4标签里，还试过加this.props，但没用。

解决方案 #

页面空白的核心原因是初始状态下mocktest可能为undefined或空对象，直接访问mocktest.questionSet会触发JS报错，导致组件渲染失败，可以通过以下方式修复：

1. 添加可选链避免空值报错
   在访问嵌套属性时使用?.操作符，同时给映射元素加上唯一key（符合React列表渲染规范）：

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

2. 初始化Redux默认状态
   在Slice的初始状态中，给mocktest设置包含空数组的默认值，确保数据未加载时questionSet是合法数组：

   const initialState = {
     mocktest: { questionSet: [] },
     isLoading: false,
     isError: false,
     message: ''
   }
   

3. 结合加载状态做条件渲染
   利用isLoading状态在数据请求完成前显示加载提示，提升用户体验：

   {isLoading ? (
     <div>加载中...</div>
   ) : (
     mocktest?.questionSet?.map((qSet) => (
       <h4 key={qSet.id} className="text-center">{qSet.setName}</h4>
     ))
   )}
   

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