反应下拉问题 - 如何立即停止所有更新动态创建的下拉列表

Question

我正在使用React 钩子动态呈现大量卡片，每个组件都有其下拉列表。如果我选择一个更新组件状态的选项，则每个下拉菜单都会更新为相同的值。我已经尝试实现选择React 的选项，并单独React-dropdown，但我的方法都不起作用。我认识到问题在于，当任何下拉列表更新时，它们都引用状态中的相同值，如果我注释掉状态更新，下拉列表将起作用。

我只是没有捕获状态更新。我不确定在用户在下拉列表之间进行选择然后显示呈现的选择时捕获这些选择的最佳方法是什么。

我见过的很多方法都没有解决在一个页面上动态创建多个下拉菜单的问题，所以如果对如何解决这个问题有任何想法，那将是有帮助的。以下是部分代码：

<select onChange(event=> selectedDropdownItem(selection)
  value={event.target.value}
  >
  dropdownList.map(name =>
  <option key={name.id} value={name.id} label={name.name} />
</select>

const [header, setHeader] = useState({ name: “select name”, id: null })

selectedDropdownItem = selection => {
  setHeader({
    name: selection.name,
    id: selection.id
  })
}

Answer 1

由于我不太清楚您对单个组件中的多项选择的问题。我刚刚创建了一个将基于此执行动态下拉菜单，并使用useState 根据选择更新名称。每当您进行选择时，它将来到父组件并进行更新并将值返回给子组件。 希望我的解释如你所料。

这是工作代码link。

如果您有任何疑问，请发表评论:)

    import React, {useState} from 'react';

    const DropDownCard = ({name, list, selectedValue, onChange}) => {

      const onSelectChange = event => {
        const { value } = event.target;
        const { name } = list.find(val => val.id == value);
        onChange({id: value, name});
      };

        return (
          <div>
            <h1>Card {name}</h1>
            <select onChange={onSelectChange} value={selectedValue}>
             {
               list.map(name => <option
                key={name.id}
                value={name.id}
                label={name.name}
              />)
             }

            </select>
          </div>
        )
    }

    const cardList = [
      {name:'', selectedValue: null},
      {name:'', selectedValue: null},
      {name:'', selectedValue: null},
    ];

    const Home = () => {
      const [hea, setHea] = useState(cardList);
      const list = [
        {name: "select name", id: ''},
        {name: "Name 1", id: 1},
        {name: "Name 2", id: 2}
      ];

      const onCardNameSelect = (info, index) => {
        setHea(prevState => {
          const {id, name} = info;
          prevState[index].selectedValue = id;
          prevState[index].name = name;
          return [...prevState];
        });
      };

      return(
        <>
          <div>Hello</div>
          {hea.map((val,i) => <DropDownCard  key={"dropDown"+Math.random()}
            name={val.name}
            selectedValue={val.selectedValue}
            list = {list}
            onChange = {event => onCardNameSelect(event, i)}
          />)}
        </>

      )
    };
    export default Home;