Reactjs 通过json服务器中获取的数据（不包括id）进行映射

我正在构建一个非常简单的react应用程序，它使用

json服务器

和

axios

，允许我创建新记录。我将响应存储在state中，并在发布新数据时映射数据。相当直接。我有一个减速机，正在通过

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)}
      />
    );
  })}

数据通过

axios

.post

请求发布到服务器，我看到每个记录都创建了

id

。但是，当我查看控制台以查看添加到我的

state.stageRaces.map

中的新项目时，

id

字段实际上不会被传递，除非我刷新页面，因此我的

id

和

键

在

中返回

未定义的
。在我看来，由于状态正在更新，数据应该被正确地获取，但我一辈子都不明白为什么不能。有什么建议吗

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