React dropdown issue-如何立即停止所有更新动态停止创建的dropdown

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;