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

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

我正在构建一个非常简单的 React 应用程序，它使用 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。但是，当我查看控制台以查看添加到我的 state.stageRaces.map 中的新项目时，除非我刷新页面，否则 id 字段实际上并未被传递，因此我的 id 和key 在 undefined 内返回 <StageListGroupItem />。在我看来，由于状态正在更新，应该正确获取数据，但我终生无法弄清楚为什么不是。有什么建议吗？