时间戳

首页 > 解决方案 > 在react redux中循环对象

reactjs - 在react redux中循环对象

问题描述

我在 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>
  )

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

标签： reactjsreact-nativereact-reduxjsx

解决方案

您应该使用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>
)

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

推荐阅读