使用 Redux 映射组件并收到错误通知Type.map 不是函数

Question

我已经拥有 React Redux 工具包所需的所有工作部分，但我似乎无法在组件中显示我的数据。我收到错误：

TypeError：noticesType.map 不是函数

> 31 |             {noticesType.map((post, index) => { 
 |                          ^
  32 |               <li key={index}>

当我用谷歌搜索错误时。当我看到的是，我很可能在寻找数组时传递一个对象。我很确定我已正确设置它。我打开了 Redux DevTools，它向我显示了从 API 调用返回的正确数据。经过 3 天的网络搜索后，这就是我所在的位置。如果有更多代码或我错过的任何内容，请告诉我。

page.tsx

  export default function page() {
 const dispatch = useAppDispatch();
 const {Notices, loading, error} = useAppSelector(state => state.noticesReducer)
 console.log('Values: ')
 console.log(Notices)

  useEffect(() => { 
    dispatch(fetchNotices())
  }, [dispatch])

 return (
<>
  <div> 
    <h1>Notices</h1>
    <ul>  
      <>    
        {Notices.map((post, index) => { 
          <li key={index}>
            {post.Title}
          </li>
        })}                
      
      </>                
    </ul>
  </div>
</>
 )
 }

noticesTypes.ts 使用 JSON 更新为 TypeScript 工具。

export interface Root {
   Notices: Notice[]
   CreatedDateTime: string
   Version: number
   Title: string
}

export interface Notice {
 id: string
 Title: string
 Description: string
 ChangeRecordNumber: any
 StartDateTime: string
 EndDateTime: string
 Planned: boolean
 ImpactType: string    
}

notice.ts/noticeSlice

type NoticeState = Root & {     
   loading: boolean, 
   error: boolean, 
}

const initialState: NoticeState = {
   Notices: [],  
   loading: false, 
   error: false
}



export const fetchNotices = createAsyncThunk('fetchNotices', async (thunkApi,{rejectWithValue}) => {

  try {
    const response = await fetch("https://API_CALL/notice")                          
    return await response.json(); 
    
  } catch (error) {
    return rejectWithValue("Something isn't working"); 
  }
}); 

export const noticeSlice = createSlice({ 
  name: 'notices', 
  initialState, 
  reducers: {
    setNotice: (state, action) => { 
        state.Notices= action.payload
    }, 
    getNotice: (state, action) => { 
        return action.payload.notices
    },         
}, 
extraReducers: (builder) => { 
    builder
    .addCase(fetchNotices.pending, (state, action) => {            
        state.loading = true;
    })
    .addCase(fetchNotices.fulfilled, (state, action) => {             
        state.loading = false, 
        state.Notices= action.payload
    })
    .addCase(fetchNotices.rejected, (state, {payload}) => { 
        state.loading = true                       
    })
 }
})

export const { 
  getNotice,
  setNotice,     
} = noticeSlice.actions

export default noticeSlice.reducer

index.ts/商店

export const store = configureStore({ 
reducer: { 
    noticesReducer, 
}, 
middleware: getDefaultMiddleware => getDefaultMiddleware({serializableCheck: false})
 })
  console.log(store.getState()); 

 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch

从 API 调用返回的 JSON。

{
"Notices": [
    {
        "id": "1",
        "Title": "test title 1",
        "Description": "Fake Notice: this is fake",            
        "StartDateTime": "2024-09-18",
        "EndDateTime": "2024-09-26",
        "Planned": true,            
        "ImpactedApps": [
            {
                "Id": "1",
                "Name": "Api 1"
            }
        ],       
        "IsActive": true
    }, 
    {
        "id": "2",
        "Title": "test title 2",
        "Description": "Fake Notice: this is fake",            
        "StartDateTime": "2024-09-18",
        "EndDateTime": "2024-09-26",
        "Planned": true,            
        "ImpactedApps": [
            {
                "Id": "2",
                "Name": "Api 2"
            }
        ],       
        "IsActive": true
    }
],
"CreatedDateTime": "2024-09-18",
"Version": 1,
"Title": "Notification Feed"
 }

这是我用 console.log() 输出时控制台中内容的图像。

这是扩展的通知

Answer 1

问题

问题在于您没有维护有效的状态不变量。在代码执行过程中的某个时刻，您将

state.Notices

从数组类型修改为其他类型，可能是整个 javascript 对象，即来自

fetchNotices

操作的响应值。

给定以下响应值：

{
  "Notices": [
    {
      "id": "1",
      "Title": "test title 1",
      "Description": "Fake Notice: this is fake",            
      "StartDateTime": "2024-09-18",
      "EndDateTime": "2024-09-26",
      "Planned": true,            
      "ImpactedApps": [
        {
          "Id": "1",
          "Name": "Api 1"
        }
      ],       
      "IsActive": true
    }, 
    {
      "id": "2",
      "Title": "test title 2",
      "Description": "Fake Notice: this is fake",            
      "StartDateTime": "2024-09-18",
      "EndDateTime": "2024-09-26",
      "Planned": true,            
      "ImpactedApps": [
        {
          "Id": "2",
          "Name": "Api 2"
        }
      ],       
      "IsActive": true
    }
  ],
  "CreatedDateTime": "2024-09-18",
  "Version": 1,
  "Title": "Notification Feed"
}

featchNotices.fulfilled

减速器案例正在传递整个响应有效负载对象，这打破了无效。

.addCase(fetchNotices.fulfilled, (state, action) => {             
  state.loading = false;
  state.Notices= action.payload; // <-- not an array! 😞
})

解决方案建议

代码应将嵌套的

Notices

数组属性传递给状态值。

.addCase(fetchNotices.fulfilled, (state, action) => {             
  state.loading = false;
  state.Notices= action.payload.Notice; // <-- an array 🙂
})

或者，如果不需要其他响应值，您可以直接从 Thunk 操作返回通知数组。

export const fetchNotices = createAsyncThunk('fetchNotices', async (thunkApi, { rejectWithValue }) => {
  try {
    const response = await fetch("https://API_CALL/notice")                          
    const { Notices } = await response.json(); 
    return Notices;
  } catch (error) {
    return rejectWithValue("Something isn't working"); 
  }
}); 

.addCase(fetchNotices.fulfilled, (state, action) => {             
  state.loading = false;
  state.Notices= action.payload; // <-- an array 🙂
})