扩展运算符...复制状态答案

【问题标题】：Spread operator ... copying state扩展运算符...复制状态
【发布时间】：2021-03-16 14:14:57
【问题描述】：

我正在使用分页，我需要在页面迭代后添加新数据来声明。使用上下文存储我的数据。

获取数据的功能

const fetchMissions = (dispatch) => async (page) => {
  const response = await fdApi.get('/mission', {
    params: { page, limit: 10 },
  });
  dispatch({ type: 'fetch_missions', payload: response.data });
};

减速器

const missionReducer = (state, action) => {
  switch (action.type) {
    case 'add_error':
      return { ...state, errorMessage: action.payload };
    case 'fetch_missions':
      return action.payload
    default:
      return state;
  }
};

问题在于reducer case 'fetch_missions'，不知道如何在获取新页面并将新数据添加到同一数组时保留旧数据

Output from my server

【问题讨论】：

state的结构是什么？
@Matt 理想情况下是任务：{ data: [], pageInfo: {} },

标签： reactjs react-native pagination react-context

【解决方案1】：

使用需要修改你的reducer，假设你的状态是{missions: []}。确保您的初始任务状态为空数组

case 'fetch_missions':
      return {missions: [...state.missions, ...action.payload.missions.docs]}

【讨论】：

Invalid JS and action.payload.missions is an object in OP's example data
@Matt 是正确的，{state.missions: []} 不是分配对象属性的有效方式。你可能只是打算这样做{missions:？
是的，抱歉，我没看到，检查一下 {missions: [...state.missions, ...action.payload.missions.docs]}
我不认为，{ ...state, missions: [...state.missions, ...action.payload.missions.docs]} 仍然不太正确，并且假设您已经获得了 state 的正确结构
他需要确保状态的结构是正确的。以上只是为了展示他如何使用它

【解决方案2】：

你需要更新你的 reducer 来获得这个代码：

// Setup the initial state of the reducer to have empty arrays or null for all values
const initialState = {
    errorMessage: null,
    missions: {
        data: [],
        pageInfo: {},
    }
};
const missionReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'add_error':
      return { ...state, errorMessage: action.payload };
    case 'fetch_missions':
      return {
        ...state,
        missions: { ...missions, data: [...missions.data, ...action.payload.missions.docs] } 
     };
    default:
      return state;
  }
};

【讨论】：