Javascript 在对象的特定属性中添加数据

我有以下申请：
该应用程序的理念是：

在每个人旁边都有一个选择标签，上面有他们的类型

每个人都应该能够选择一个选项，将自己分配给特定的

玩具
。
例如：卡尔可以通过从select中选择
M
，仅将自己分配给
toyType:“M”
，选择后，我应获得下一个数据：

如果另一个用户单击

M

，则其姓名和年龄也应从上方添加到

persons

数组中

禁用的选项与个人的

类型
不一致；例：Lisa患有
M
残疾，因为她的类型不是
M
，而是
F

每个人只需一次而不是两次就可以将其添加到特定的玩具中

…我尝试实现用户可以将自己分配给特定玩具的功能，但当另一个用户想要将自己添加到一个已经存在人的玩具中时，会出现问题，因为前一个人消失了，取而代之的是最后一个，但我需要一组人。

此外，我也不知道如何禁止用户在同一个玩具上签名两次。
问题：谁知道如何解决这些问题？谢谢
我不太清楚你想描述什么问题。在实时演示中，每个用户都可以从两个选项中选择一个，就是这样。我看不到您在哪里存储任何状态信息，也看不到有什么不正常。你能澄清一下吗？@David，这个应用程序的想法是：每个人都可以被分配到一个玩具，这个玩具有合适的
toyType
，如果person
type
==
toyType
，那么paerson就可以将自己分配到玩具。现在这个功能已经存在了。但是，每个玩具在分配了一个人之后都可以创建额外的属性，比如：
persons
，这是一个数组，可以存储人。现在我可以添加一个人，但如果我添加第二个人，它会覆盖数组中的前一个人，我还想禁止对同一个人进行双重赋值。@David，如果清楚，请告诉我。Thanks@David，在
console.log中（“result”，result）我应该得到结果。你能帮忙吗？你是在问如何保持反应中的状态吗？您当前没有将该结果存储在任何位置，这就是为什么每次操作后它都是一个新结果。您的应用程序中没有状态管理。听起来，关于React以及如何在组件状态下管理数据的一些教程（在本例中可能使用React中的
useState
hook）对您的帮助最大。我不太清楚您试图描述的是什么问题。在实时演示中，每个用户都可以从两个选项中选择一个，就是这样。我看不到您在哪里存储任何状态信息，也看不到有什么不正常。你能澄清一下吗？@David，这个应用程序的想法是：每个人都可以被分配到一个玩具，这个玩具有合适的
toyType
，如果person
type
==
toyType
，那么paerson就可以将自己分配到玩具。现在这个功能已经存在了。但是，每个玩具在分配了一个人之后都可以创建额外的属性，比如：
persons
，这是一个数组，可以存储人。现在我可以添加一个人，但如果我添加第二个人，它会覆盖数组中的前一个人，我还想禁止对同一个人进行双重赋值。@David，如果清楚，请告诉我。Thanks@David，在
console.log中（“result”，result）我应该得到结果。你能帮忙吗？你是在问如何保持反应中的状态吗？您当前没有将该结果存储在任何位置，这就是为什么每次操作后它都是一个新结果。您的应用程序中没有状态管理。听起来您会从一些关于React以及如何在组件状态下管理数据的教程中受益匪浅（在本例中，可能使用React中的
useState
hook）。
    0: Object
    color: "red"
    toyType: "M"
    persons: Array[1]
              0: Object
              name: "Carl"
              age: 17
    1: Object
    color: "white"
    toyType: "F"

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



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