在react redux中循环对象

Question

我在 modalProps.rows 中有一个对象，如下所示：

我需要用它构建一个选择菜单。这就是我所做的一切

  <Select name="replace_id" onChange={handleActivityAreaChange}>
  {console.log(modalProps.rows)}
    {Object.keys(modalProps.rows).map(({ id, name }, index) =>
      <option key={index}
        value={id}>
        {name}
      </option>
    )}
  </Select>

上面没有给我任何错误，但下拉列表仍然是空的。我错过了什么？

---

玩了一会儿，这就是我所做的

  const options = []

  Object.keys(modalProps.rows).forEach(key => {
    options.push({value: modalProps.rows[key].id, label: modalProps.rows[key].name});
  });

  const renderActivityAreaList = () => (
    <Flex width="100%">
      {t('entities.activityAreas.used')}
      <Select name="replace_id" options={options} onChange={handleActivityAreaChange} />
    </Flex>
  )

上述工作按预期工作......但我仍然希望我能理解我之前的尝试出了什么问题。

Answer 1

您应该改用Object.values 来检索您的对象数据：

  <Select name="replace_id" onChange={handleActivityAreaChange}>
  {console.log(modalProps.rows)}
    {Object.values(modalProps.rows).map(({ id, name }) =>
      <option key={id}
        value={id}>
        {name}
      </option>
    )}
  </Select>

注意：更喜欢将您的 id 作为键而不是数组的索引

更新

鉴于您的实现，它可能与 Select 组件预期接收的内容有关。如果你喜欢：

const options = Object.values(modalProps.rows).map(({ id, name }) => ({ value: id, label: name }))

const renderActivityAreaList = () => (
  <Flex width="100%">
    {t('entities.activityAreas.used')}
    <Select name="replace_id" options={options} onChange={handleActivityAreaChange} />
  </Flex>
)

你很可能会面临同样的结果