javascript - 在数组中添加新数据

Question

我有一个应用程序，我必须使用选择标签从 UI 中选择数据。我有 3 个select具有不同类型数据的标签。我还连接了 redux 来管理应用程序中的状态。这是我的组件：

const MyComponent = ({ array, keyword }) => {
  const selector = useSelector(selector => selector);
  const dispatch = useDispatch();
  function handleChange(value) {
    const details = {
      [keyword]: value
    };
    dispatch(getData(details));
  }
  console.log(selector);

  return (
    <Select
      mode="multiple"
      placeholder="select"
      style={{ width: 120 }}
      onChange={handleChange}
    >
      {array.map((i, k) => {
        return (
          <Option key={k} value={i}>
            {i}
          </Option>
        );
      })}
    </Select>
  );
};

我在这里存储我的数据：
const initialState = { data: [] };

我接下来要做：
1. 当我从 UI 中选择数据时，我想创建下一个对象：

[
{car: ['car', 'car', 'car']}  // the length depends by how many cars i select
{objects: ['object', 'object']} // length depends by how many objects i select
{color: ['color', 'color']} //// the length depends by how many colors i select
]

因此，上面每个数组的长度将取决于用户选择的元素数量。此外，如果用户只选择car元素，则数组应如下所示：

 [
    {car: ['car', 'car', 'car']}  
    {objects: ['']} 
    {color: ['']} 
 ]

另外，如果用户unselect要从 Select 中选择一个元素，则该数组应根据用户操作而更改，并且应从某个数组中删除一个元素，这取决于删除了多少用户。
现在，如果用户从每个 Select 中仅选择一个元素，并且如果他选择多个元素，则代码可以工作，则上述想法不起作用。另外，现在如果用户unselect从他选择的选项中选择一个元素，数组会增加，但不会减少。
问题：如何实现上述想法？ 演示 https://codesandbox.io/s/basic-usage-ant-design-demo-t30gw?file=/SelectComponent.js:213-792

标签： javascriptarraysreactjs