Question

我正在使用React Hooks + Redux。
我有一个包含数组的对象：

{
  id: "c59a3203-af94-49c3-abb6-87073619fbce"
  type: "block"
  attributes: {
    title: "THis is the first title"
    status: "published"
    published: true
    attachments: (4) [{…}, {…}, {…}, {…}] <== this is array I need to access 
    articles: [{…}]
    external_resources: []
  }
}

点击时，我将附件数组（如下所示）加载到Redux中，并使用钩子useSelector将其提取到我的组件中：

(4) [{…}, {…}, {…}, {…}]
0: {id: "f15dbb5b-79e5-4204-9161-77bd6917814b", type: "attachment", attributes: {…}}
1: {id: "4971d5c8-df8e-4930-bafe-a12160493371", type: "attachment", attributes: {…}}
2: {id: "a275d3da-ad26-4144-819c-8f2db972ad6e", type: "attachment", attributes: {…}}
3: {id: "c15ea08c-a12f-4822-84bf-580f27fa1c94", type: "attachment", attributes: {…}}

如您所见，这是一个数组，但是由于任何原因，当我使用useSelector从组件调用它并映射它时，都会收到以下错误消息：

TypeError: Cannot read property 'map' of undefined

这里是组件：

const attachmentsData = useSelector(
  state => state.attachments.attachmentsData,
  shallowEqual
);

console.log(attachmentsData.map(x => x)) <== ERROR
console.log(attachmentsData) <=== SHOWS THE ARRAY WITHOUT ERRORS

这是减速器：

const initialState = {
    attachmentsRaw: [],
    attachmentsData: []
};

const attachmentsReducer = (state = initialState, action) => {
    switch (action.type) {
        case ATTACHMENTS.GET_START:
            return {
                ...state,
                attachmentsRaw: getLoadingState()
            };

        case ATTACHMENTS.GET_SUCCESS:
            return {
                ...state,
                attachmentsRaw: getReadyState(action.data),
                attachmentsData: action.data
            };

        case ATTACHMENTS.GET_FAIL:
            return {
                ...state,
                attachmentsRaw: getErrorState()
            };

        default:
            return state;
    }
};
export default attachmentsReducer;

我在做什么错？
我可以说，当组件加载时，Redux需要一秒钟的时间来加载数据，这意味着在我的组件第一次渲染时，常量attachmentsData是一个空数组[]。

感谢您的帮助。乔

Answer 1

attachmentsData可能仍未定义，或者在您尝试对其进行修复时未填充，请将其添加到代码attachmentsData && attachmentsData.length && attachmentsData.map...

Answer 2

您如何将数据加载到Redux？如果您有可加载的静态数据，则应将其放入化简器的initialState中，而不是随后注入。

https://redux.js.org/recipes/structuring-reducers/initializing-state/

Answer 3

您可以先检查attachmentsData是否存在，然后才能映射数组。

Answer 4

我认为您是在填充数组之前获取数据

使用此

attachmentsData？ attachmentsData.map（x => x）：无效0

Answer 5

根据上面的Shmili和Study Mania的建议，我发现了一种更清洁的解决方案：

(attachmentsData || []).map(item => ( ....

这很奇怪。在控制台日志中，我看到attachmentsData被渲染了3次。第一次是在redux中配置的空数组，第二次是未定义（这是问题所在），第三次是填充数组。

因此，我将不得不研究为什么，首先，它渲染3次，其次为什么第二次未定义。

修复未定义内容后，我将在此处发布。

当我尝试映射Redux数组时为什么会发生错误？

5 个答案: