Массив объектов не может добавлять предметы на фишки React из material-ui - PullRequest
Новая
       4

Массив объектов не может добавлять предметы на фишки React из material-ui

0 голосов
/ 24 сентября 2019

Сейчас у меня небольшая проблема с компонентом Material-UI Chips.У меня есть выбор со списком пользователей.Когда вы выбираете пользователя, прямо под формой появляется фишка с его номером.Все работает просто отлично, но чипы перезаписываются, а не добавляются новые.Вот мой код: 

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...}), которое прекрасно работает, но не позволяет мне добавлять другие элементы, если я удаляю любой из них.С помощью приведенного выше кода микросхемы просто перезаписывают предыдущий и не добавляются в массив.

1 Ответ

0 голосов
/ 24 сентября 2019

Онлайн Пример, пожалуйста, подтвердите, если у вас есть проблема:

https://codesandbox.io/s/material-ui-n7kbp только отредактированные значения визуализации ключа: 

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