Question

标题几乎解释了我的问题。我模拟了一些需要显示在下拉菜单中的数据，该下拉菜单组件来自SUIR

mock.onGet("/slotIds").reply(200, {
  data: {
    slotIds: [{ id: 1 }, { id: 2 }, { id: 3 }]
  }
});

我正在通过获取数据来更新状态

  const { data } = await axios.get("/slotIds");
  console.log("Slot IDs --> ", data);
  const slotIds = data.data;
  this.setState({ slotIds: slotIds });
  console.log(this.state.slotIds);
  //the above log outputs [Object, Object, Object] so slotIds is in fact an array

然后我将这些值映射为在下拉列表中呈现id

        options={slotIds.map(id => {
          return {
            key: id.id,
            text: id.id,
            value: id.id
          };
        })}

不能完全正常工作，我是错误地映射了值还是返回了错误的值？

我有一个codesandbox再现了问题。您需要单击初始页面顶部的Login按钮。选择Slot Sec Officer单选按钮，查看控制台，它将显示成功的api调用以及slotIds状态的更新方式。我已经注释掉.map函数，因为当选择Slot Sec Officer选项时，它将导致组件无法渲染。

整个Login代码在/components/Login.js内部。 SlotSecIdInputs类包含api调用和具有地图功能的实际<Dropdown>组件。

Answer 1

您在SlotSecIdInputs中有几个错误：

您尚未在构造函数中定义状态slotIds
默认状态应定义为数组，因为您映射了获取的项，这些项后来存储为数组
您应该控制提取加载。

最初，仅在渲染组件时，您没有slotIds状态，因此无法在其上进行映射并得到错误。提取slotIds后，应确保它不为空，并在其上进行映射之后。

希望它会对您有所帮助。

映射对象数组-无法将值放入下拉列表

1 个答案: