Как поместить несколько элементов в массив на основе проверенного значения из списка нескольких флажков?

Я пытаюсь заполнить массив на основе выбранных/отмеченных значений из флажка. Допустим, у нас есть 3 массива строк

const cars = ["Ford", "Chevy", "Honda", "Toyota"];
const phones = ["iPhone", "Samsung", "Nokia", "Sony"];
const laptops = ["Mac", "Dell", "HP", "Acer"];

и другой массив, который включает значения флажков.

const names = ["cars", "phones", "laptops"];

Моя цель - поместить в массив (скажем, selectedProductArray) массив с тем же именем, что и проверенное значение. Вот что я сделал до сих пор, добавляя только один выбранный/проверенный массив.

const selectedProductArray = [];
  const selectedProductInfo = nameArr.includes("phones")
    ? selectedProductArray.concat(phones)
    : nameArr.includes("laptops")
    ? selectedProductArray.concat(laptops)
    : selectedProductArray.concat(cars);


Я пытаюсь добавить в массив несколько массивов на основе выбора флажка.
Например, если в списке флажков отмечены значения cars и phones, нужный массив будет выглядеть так

["Ford", "Chevy", "Honda", "Toyota", "iPhone", "Samsung", "Nokia", "Sony];

Весь код и ссылка на демонстрационную песочницу

import * as React from "react";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  }
};

const cars = ["Ford", "Chevy", "Honda", "Toyota"];
const phones = ["iPhone", "Samsung", "Nokia", "Sony"];
const laptops = ["Mac", "Dell", "HP", "Acer"];

const names = ["cars", "phones", "laptops"];

export default function MultipleSelectCheckmarks() {
  const [nameArr, setNameArr] = React.useState<string[]>([]);

  const handleChangeEvent = (event: SelectChangeEvent<typeof nameArr>) => {
    const {
      target: { value }
    } = event;
    setNameArr(typeof value === "string" ? value.split(",") : value);
  };

  const selectedProductArray = [];
  const selectedProductInfo = nameArr.includes("phones")
    ? selectedProductArray.concat(phones)
    : nameArr.includes("laptops")
    ? selectedProductArray.concat(laptops)
    : selectedProductArray.concat(cars);
  console.info("selectedProductInfo", selectedProductInfo);
  console.info("selectedProductArray", selectedProductArray);

  return (
    <div>
      <FormControl sx = {{ m: 1, width: 300 }}>
        <InputLabel id = "demo-multiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId = "demo-multiple-checkbox-label"
          id = "demo-multiple-checkbox"
          multiple
          value = {nameArr}
          onChange = {handleChangeEvent}
          input = {<OutlinedInput label = "Tag" />}
          renderValue = {(selected) => selected.join(", ")}
          MenuProps = {MenuProps}
        >
          {names.map((name) => (
            <MenuItem key = {name} value = {name}>
              <Checkbox checked = {nameArr.indexOf(name) > -1} />
              <ListItemText primary = {name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Любая помощь будет оценена

Высоко не рекомендуется и не рекомендуется: nameArr.flatMap(x => eval(x)). Лучшим, разумным/мудрым подходом было бы пересмотреть три массива cars, phones, laptops и поместить их в виде пар ключ-значение в общий объект (например: const obj = { cars: ["Audi", "Porsche", ...], phones: ["ROG", "Pixel", ....], ...};). Затем obj.cars получит массив cars. И, nameArr.flatMap(x => obj[x]);

jsN00b 05.04.2022 11:54

Привет, @jsN00b, спасибо за рекомендацию. Я попробую.

Greg 05.04.2022 11:59

Пожалуйста, попробуйте подход с использованием объекта obj. Пожалуйста, не попробуйте eval — это большой нет нет. :-)

jsN00b 05.04.2022 12:00

@ jsN00b еще раз спасибо за ответ. Я попробовал способ, который вы рекомендовали. И вот что я получил. Подскажите, пожалуйста, что я делаю не так codeandbox.io/s/…

Greg 05.04.2022 12:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Этот ответ направлен на то, чтобы помочь ОП достичь указанной ниже цели,

For example, if there are checked cars and phones values in checkbox list, the desired array would look like so

["Ford", "Chevy", "Honda", "Toyota", "iPhone", "Samsung", "Nokia", "Sony];

Для этого внесите следующие изменения:

Сначала объявите объект следующим образом:

  const nameArrayOfObj = {
      cars: ["Ford", "Chevy", "Honda", "Toyota"],
      phones: ["iPhone", "Samsung", "Nokia", "Sony"],
      laptops: ["Mac", "Dell", "HP", "Acer"]
  };

Затем добавьте следующую строку сразу под внешним/самым верхним <div>:

{JSON.stringify(nameArr.flatMap(name => nameArrayOfObj[name]))} <br/><br/><br/>

Теперь, когда пользователь устанавливает флажки cars, phones, laptops, соответствующие элементы из этих массивов будут отображаться чуть выше раскрывающегося списка Select.

Image from codesandbox demo

Другие вопросы по теме