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

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 。类(class)SlotSecIdInputs包含 api 调用和实际的 <Dropdown>具有 map 功能的组件。

Answer 1

您在 SlotSecIdInputs 中有几个错误:

1. 您尚未在构造函数中定义状态 slotIds
2. 默认状态应该定义为一个数组，因为您映射了获取的项目，然后将其存储为数组
3. 您应该控制提取加载。

最初，当组件刚刚渲染时，您没有 slotIds 状态，因此您无法映射它并且会收到错误。获取 slotIds 后，您应该确保它不为空，然后对其进行映射。

希望对您有帮助。