循环使用react-select时无法多选的问题求助

问题根源 #

你的代码存在三个核心问题导致下拉框显示无选项：

1. React-Select默认依赖label和value字段识别选项，但你的选项用的是id和attrName，组件无法匹配已选和候选选项
2. selectedOptions初始为空数组，存在索引不匹配的潜在问题
3. objects和options数组的对象之间缺少逗号，属于JS语法错误

修复步骤 #

1. 给React-Select指定字段匹配规则

添加getOptionLabel和getOptionValue属性，告诉组件如何读取选项的显示文本和唯一标识：

<Select
  key={object.id}
  closeMenuOnSelect={false}
  value={selectedOptions[index]}
  onChange={(selected) => handleSelectChange(selected, index)}
  isMulti={true}
  options={options}
  // 新增：指定显示文本和值字段
  getOptionLabel={(option) => option.attrName}
  getOptionValue={(option) => option.id.toString()}
/>

把id转成字符串是因为React-Select要求value必须是字符串类型，避免类型不匹配导致的选项消失问题

2. 初始化匹配表格行数的选中状态数组

将selectedOptions初始化为和objects长度一致的空数组，避免索引越界或undefined问题：

const [selectedOptions, setSelectedOptions] = useState(Array(objects.length).fill([]));

3. 修复数组语法错误

给objects和options数组里的每个对象末尾添加逗号：

const objects = [
  {'id':1, 'objectName':'Obj1'},
  {'id':2, 'objectName':'Obj2'},
  {'id':3, 'objectName':'Obj3'}
];
const options = [
  {'id':1, 'attrName':'atr1'},
  {'id':2, 'attrName':'atr2'},
  {'id':3, 'attrName':'atr3'}
];

完整修复代码 #

import { useState } from 'react';
import Select from 'react-select';
import { Table, Thead, Tbody, Tr, Th, Td, Flex } from '@chakra-ui/react';

const ObjectAttributeTable = () => {
  const objects = [
    {'id':1, 'objectName':'Obj1'},
    {'id':2, 'objectName':'Obj2'},
    {'id':3, 'objectName':'Obj3'}
  ];
  
  const options = [
    {'id':1, 'attrName':'atr1'},
    {'id':2, 'attrName':'atr2'},
    {'id':3, 'attrName':'atr3'}
  ];

  // 初始化对应行数的选中状态数组
  const [selectedOptions, setSelectedOptions] = useState(Array(objects.length).fill([]));
  const borderColor = 'gray.200';

  const handleSelectChange = (selected, index) => {
    setSelectedOptions((prev) => {
      const updated = [...prev];
      updated[index] = selected;
      return updated;
    });
  };

  return (
    <Table variant='simple' color='gray.500' mb='24px' border={'1px'} borderColor={borderColor}>
      <Thead>
        <Tr>
          <Th pe='10px' borderColor={borderColor}>
            <Flex
              justify='space-between'
              align='center'
              fontSize={{ sm: "10px", lg: "12px" }}
              color='gray.400'>
              Object
            </Flex>
          </Th>
          <Th pe='10px' borderColor={borderColor}>
            <Flex
              justify='space-between'
              align='center'
              fontSize={{ sm: "10px", lg: "12px" }}
              color='gray.400'>
              Attributes
            </Flex>
          </Th>
        </Tr>
      </Thead>
      <Tbody>
        {objects.map((object, index) => (
          <Tr key={object.id}>
            <Td>{object.objectName}</Td>
            <Td>
              <Select
                key={object.id}
                closeMenuOnSelect={false}
                value={selectedOptions[index]}
                onChange={(selected) => handleSelectChange(selected, index)}
                isMulti={true}
                options={options}
                getOptionLabel={(option) => option.attrName}
                getOptionValue={(option) => option.id.toString()}
              />
            </Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  );
};

export default ObjectAttributeTable;

内容的提问来源于stack exchange，提问作者Ramchendar m