根据另一个多值 Select 组件渲染多个 Select 组件答案

【问题标题】：Render multiple Select components depending on another multi value Select component根据另一个多值 Select 组件渲染多个 Select 组件
【发布时间】：2021-04-10 09:41:18
【问题描述】：

我有一个多值 Select 组件 (1)，我希望当前处于该表单中的每个项目都相应地呈现另一个 Select 组件 (2)。即使从 (1) 组件中删除一个项目会正确地重新渲染 (2) 组件的数量，但 (2) 组件中显示的值不再根据 (1) 组件中的对应项目。 (1) 组件中的每个选项都有一个“乘法器”键，需要在其对应的 (2) 组件中显示为 defaultValue。如果用户更改了 (2) 组件中的值，则状态应更新组件 (1) 的选项的“乘数”键以及状态。

很难描述，请看下面的 gif 和下面的代码。在gif中，右边的Select应该是“1x”、“2x”、“2x”。我的代码可能非常幼稚，如果有人有一般意见，请作为我的客人来改进这个 react-newbie 的代码。

选择数组：

let optionsIngameMode = [
  { value: 'acorn', label: <div><img src={acorn} height={'20px'} width= 
    {'20px'}/>Acorn</div>, multiplicator: 1 },
  { value: 'rose', label: <div><img src={rose} height={'20px'} width={'20px'}/>Rose</div>, 
    multiplicator: 1 },
  { value: 'bell', label: <div><img src={bell} height={'20px'} width={'20px'}/>Bell</div>, 
    multiplicator: 2 },
  { value: 'shield', label: <div><img src={shield} height={'20px'} width= 
    {'20px'}/>Shield</div>, multiplicator: 2 }
 ];

const optionsMultiplicators = [
  { value: 1, label: '1x'},
  { value: 2, label: '2x'},
  { value: 3, label: '3x'},
  { value: 4, label: '4x'},
  { value: 5, label: '5x'},
  { value: 6, label: '6x'},
  { value: 7, label: '7x'},
  { value: 8, label: '8x'},
  { value: 9, label: '9x'},
  { value: 10, label: '10x'},
];

构造函数：

constructor(props) {
  super(props);
  this.state = {
    mode: null,
    lobbyType: null,
    startingCard: null,
    ingameModes: [],
    weis: false,
    crossWeis: null,
    weisAsk: null
  };
  this.handleChange = this.handleChange.bind(this);
};

handleChange函数：

  handleChange = (selector, event) => {
   switch (selector) {
     case 'multiplicators': {
       console.log(event);
       optionsIngameMode = optionsIngameMode.map(m => {
         if(m === event.mode) {
           return {...event.mode, multiplicator: event.newMult.value};
         }
         return m;
       });
       console.log(optionsIngameMode);
       const updatedIngameModes = this.state.ingameModes.map(m => {
         if(m === event.mode) {
           return {...event.mode, multiplicator: event.newMult.value};
         }
         return m;
       });
       this.setState({ingameModes: updatedIngameModes});
       break;
     };
     case 'modes': {
       const updatedGameModes = optionsIngameMode.filter(m => {
         for(let mode of event) {
           if(mode.label == m.label) {
             return true;
           }
         }
         return false;
       });
       console.log(updatedGameModes);
       this.setState({ingameModes: updatedGameModes});
       break;
     };
   }
 }

选择组件 (1)：

<Select
    styles={customColumnStyle}
    onChange={newModes => this.handleChange('modes', newModes)}
    closeMenuOnSelect={false}
    options={optionsIngameMode}
    defaultValue={optionsIngameMode}
    noOptionsMessage={() => "No game modes selected"}
    isMulti
    autoFocus
/>

选择组件（2）：

{this.state.ingameModes?.map(mode =>
    <Select
        options={optionsMultiplicators}
        defaultValue={optionsMultiplicators[mode.multiplicator - 1]}
        onChange={newMult => this.handleChange('multiplicators', {mode, newMult})}
    />
)}

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

React 不知道列表中 Select 项的 mode，除非您提供唯一的 key。当您删除列表中的任何项目而不为每个项目提供密钥时，它将删除最后一个，因为它无法区分它们中的任何一个。

key 是一个特殊的 props，即使你没有在 JSX 元素中定义它，它也始终可用。

{this.state.ingameModes?.map(mode =>
    <Select
        key={mode.value}
        options={optionsMultiplicators}
        defaultValue={optionsMultiplicators[mode.multiplicator - 1]}
        onChange={newMult => this.handleChange('multiplicators', {mode, newMult})}
    />
)}

【讨论】：