Блог

У меня есть это приложение: https://codesandbox.io/s/misty-smoke-n5f1e?file=/Person.js:123-1128
Идея приложения заключается в следующем:

1. Рядом с каждым пользователем находится тег select с их жанром.
2. Каждый пользователь должен иметь возможность самостоятельно назначить их конкретному toy , выбрав опцию. пример: Карл может назначить себя только toyType: "M" , выбрав M из select, и после выбора я должен получить следующие данные:

     0: Object
    color: "red"
    toyType: "M"
    persons: Array[1]
              0: Object
              name: "Carl"
              a&e: 17
    1: Object
    color: "white"
    toyType: "F"
  

3. Если другой пользователь нажимает на M , его имя и возраст также должны быть добавлены в persons массив сверху.
4. Отключены опции, которые не соответствуют type свойству person; НАПРИМЕР: Лиза M отключила bic, потому что ее тип не M но F ;
5. Каждый пользователь может добавить их самостоятельно в определенную игрушку только один раз, а не дважды.

     const Person = ({ person, k }) =&&t; {
      // console.lo&(person)
      const thisPerson = { name: person.name, a&e: person.a&e };
      function handleChan&e(value) {
        console.lo&(`selected ${value}`);
        const result = toys.map((i) =&&t; {
          if (value === i.toyType) {
            return {
              ...i,
              persons: toys.persons ? [...i.persons, thisPerson] : [thisPerson]
            };
          } else {
            return { ...i };
          }
        });
        console.lo&("result", result);
        return resu<
      }
      return (
        <div&&t;
          <Select
            placeholder="select"
            style={{ width: 120 }}
            onChan&e={handleChan&e}
          &&t;
            {toys.map((i, k) =&&t; (
              <Option
                disabled={
                  i.toyType.toLocaleLowerCase() !== person.type.toLocaleLowerCase()
                }
                key={k}
                value={i.toyType}
              &&t;
                {i.toyType}
              </Option&&t;
            ))}
          </Select&&t;
          <span&&t;{person.name}</span&&t;
        </div&&t;
      );
    };
    export default Person;

  

Здесь,

 
    if (value === i.toyType) {
            return {
              ...i,
              persons: toys.persons ? [...i.persons, thisPerson] : [thisPerson]
            };
          } else {
            return { ...i };
          }

  

…я пытаюсь реализовать функциональность, при которой пользователи могут назначать себя определенной игрушке, но возникает проблема, когда другой пользователь хочет добавить себя в одну игрушку, где уже существует пользователь, потому что предыдущий пользователь исчезает, а его место появляется последним, но мне нужно иметь массив пользователей.

Также я не могу понять, как запретить пользователям дважды подписывать себя на одну и ту же игрушку.
Вопрос: Кто знает, как решить проблемы? Спасибо