React 中的动态值下拉列表答案

【问题标题】：Dynamic Value Dropdown in ReactReact 中的动态值下拉列表
【发布时间】：2021-07-22 03:38:23
【问题描述】：

我有一个名为types 的变量，我想在选择下拉菜单中显示它。我很难显示它。它的值是基于types 的动态值。请在此处检查我的代码框

代码

 {types.map((value, index) => (
        <Dropdown value={value} index={index} />
 ))}


const Dropdown = ({ value, index }) => {
  const select = (e) => {
    console.log(e);
  };
  return (
    <Select onChange={(e) => select(e)}>
      {/* {value.map((value, index) => (
        {value.name}
        <option value="1">{value.option[index+1]}</option>
      ))} */}
    </Select>
  );
};

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

在<Dropdown /> 组件中，值不是数组而是对象。如果要循环遍历它，请执行以下操作：

    const Dropdown = ({ value, index }) => {
  const select = (e, value) => {
    console.log("event", e);
    console.log("object", value);
  };
  return (
    <Select onChange={(e) => select(e, value)}>
      {Object.keys(value)
        .filter((key) => value[key] && key.startsWith("option"))
        .map((key, index) => (
          <option value={key}>{value[key]}</option>
        ))}
    </Select>
  );
};

https://codesandbox.io/s/dynamic-select-dropdown-styled-components-forked-78qm6?file=/Dropdown.js

【讨论】：

嗨，它应该显示6 Pack，红色，蓝色等选项的值......
@Joseph，您只需要像<option value={key}>{value[key]}</option> 那样交换键/值。我更新了我的答案和代码框
谢谢。知道如何不显示 null values 以及 console.log 在 select 函数中选择的整个对象。
@Joseph，要删除空值，只需在过滤函数value[key] && key.startsWith("option") 中添加额外检查。要显示所选对象，我必须将其传递给 select 函数。更新了我的答案和沙盒
@Joseph，忘记更新上一个编辑中的沙盒 URL codesandbox.io/s/…

【解决方案2】：

使用您的数据结构，如果您这样做，您的Dropdown 组件可以工作，但只会选择第一个选项。

const Dropdown = ({ value, index }) => {
  return (
    <Select>
        <option value="1">{value[`option${index+1}`]}</option>
    </Select>
  );
};

但这是我的建议，如果这在您的控制范围内，我建议您将您的 types 数据结构稍微重构为如下所示

const types = [
    {
      id: "1",
      name: "color",
      options: [
        {value: "red", label: "red"}, 
        {value: "blue", label: "blue"}
      ],
      price: 12
    },
    {
      id: "2",
      name: "weight",
      options: [
        {value: "", label: "Placeholder"},
        {value: "20", label: "20 Kilos"}, 
        {value: "30", label: "30 Kilos"}, 
        {value: "40", label: "40 Kilos"}, 
        {value: "50", label: "50 Kilos"}
      ],
      price: 13
    }
];

那么你的下拉组件也可以重构为这个

const Dropdown = ({ options, index }) => {
  return (
    <Select>
      {options.map((option) => <option value={option.value}>{option.label}</option>)}
    </Select>
  );
};

这将使您能够轻松地将Dropdown 组件与type 数组一起使用，如下所示

  return (
    <MainContainer>
      {types.map((value, index) => (
        <Dropdown options={value.options} index={index} />
      ))}
    </MainContainer>
  );

【讨论】：

【解决方案3】：

我建议修复类型结构，无论如何你可以通过以下代码在js端修复它

let options = Object.fromEntries(Object.entries(value).filter(entry => Object.keys(value).filter(k => k.startsWith("option")).includes(entry[0])));

示例选项值：

{option1: "20 Kilo", option2: "30 Kilo", option3: "40 Kilo", option4: "50 Kilo"}

【讨论】：