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)}
          />
        );
      })}

对象数组无法从material-ui

1 个答案: