reactjs - 通过 json-server 中获取的数据进行映射，不包括 id

Question

我正在构建一个非常简单的反应应用程序，它使用json-server和axios，允许我创建新记录。我将响应存储在状态中，并在发布新数据时映射数据。非常坦率的。我有一个减速器，并通过以下方式将数据传递给我的组件useContext：

const stageRaceReducer = (state: State, action: any) => {
  switch (action.type) {
    case ACTIONS.FETCH_SUCCESS:
      return {
        ...state,
        loading: false,
        stageRaces: action.payload,
      };
    case ACTIONS.ADD_STAGE_RACE:
      return {
        ...state,
        modalOpen: false,
        stageRaces: [...state.stageRaces, action.stageRace],
      };
    default:
      return state;
  }
};


const StageRaceContext = createContext({} as IStageRaceContext);
export const useStore = () => useContext(StageRaceContext);

中的数据state.stageRaces如下所示：

{
  "stage-races": [
    {
      "name": "Older",
      "stages": [
        {
          "id": "koib67vk",
          "name": "Stage 1",
          "date": "2021-05-19"
        }
      ],
      "id": 1
    }
  ]
}

在我的主要组件中，我state.stageRaces像这样映射：

{state.stageRaces.length === 0
  ? "No stage races"
  : state.stageRaces.map((stageRace: IStageRace) => {
    return (
      <StageRaceListGroupItem
        name={stageRace.name}
        date={getEarliestDate(stageRace.stages)}
        key={`stage-race-${stageRace.id}`}
        id={stageRace.id}
        duration={getDuration(stageRace.stages)}
        onDelete={() => handleDeleteStageRace(stageRace.id)}
      />
    );
  })}

这是我遇到的问题。当我添加一个新项目时state.stageRaces，它来自初始状态：

const initialStageRaceState = {
  name: "",
  stages: [] as IStage[],
};

并且该数据通过axios .post请求发布到服务器，我看到id为每条记录创建了一个。但是，当我查看控制台以查看添加到 my 的新项目时，除非我刷新页面，否则state.stageRaces.map该id字段实际上并没有被传递，因此 my和id正在key返回undefined。<StageListGroupItem />在我看来，由于状态正在更新，因此应该正确获取数据，但我终其一生都无法弄清楚为什么不正确。有什么建议么？

标签： reactjsaxiosreact-hooksreact-statejson-server