对象数组无法从 material-ui 在 React 芯片上添加项目

Question

我现在在使用 Material-UI 芯片组件时遇到一个小问题。我有一个包含用户列表的选择。当你选择一个用户时，一个带有他号码的芯片会出现在表格的正下方。一切正常，但芯片正在覆盖，而不是添加新的。这是我的代码：

import React from 'react';
import Chip from '@material-ui/core/Chip';

export default function Test(){
   const [chipData, setChipData] = React.useState([]);
   const userArray = [
      {key: 1, label: name1},
      {kel: 2, label: name2}
   ];
   const [userValue, setUserValue] = React.useState('');

   // This come from the select form onChange
   const handleSelect = (e) => {
      setUserValue(e.target.value);
      setChipData([...chipData, {key: e.target.value, label: e.target.value}]);
   }

   const handleDelete = chipToDelete => () => {
      setChipData(chips => chips.filter(chips => chips.key !== chipToDelete.key));
   }

   return(
      <div>
      <TextField
         select
         value={userValue}
         onChange={e => handleSelect(e)}
      >
         {userArray.map(option => (
            <MenuItem key={option.key} value={option.label}>
               {option.label}
            </MenuItem>
         ))}
      </TextField>
      {chipData.map(data => {
         return(
            <Chip
               key={data.key}
               label={data.label}
               onDelete={handleDelete(data)}
            />
         );
      })}
      </div>
   );
}

我尝试使用类似chipData.push({data...}) 的东西，效果很好，但如果我删除其中任何一个，则不允许我添加更多项目。使用上面的代码，芯片只是覆盖了之前点击的那个，而不是添加到数组中。

Answer 1

在线示例，请验证是否有问题：

https://codesandbox.io/s/material-ui-n7kbp 只编辑了关键渲染值：

{chipData.map((data, index) => {
        return (
          <Chip
            key={data.key + index}
            label={data.label}
            onDelete={handleDelete(data)}
          />
        );
      })}