React js在具有属性的数组中添加或删除状态对象

Question

我需要从状态添加或删除对象。

状态：

  constructor(props) {
    super(props);
    this.state = {
      scopesUser: [
        {
          scope: "user",
          actions: ["create"]
        },
        {
          scope: "make",
          actions: ["create", "update", "delete"]
        }
      ]
    };
  }

功能：

 onChangeScope = (scope, action, ev) => {
    let event = ev.target.checked;
    const { scopesUser } = this.state;
    let copyScopes = Object.assign([], scopesUser);
    console.log(scope, action, event, copyScopes);

    let find = copyScopes.filter(obj => {
      return obj.scope === scope;
    });
    let el = Object.assign({}, find[0]);

    if (event === true) {
      if (el.scope === undefined) {
        console.log("creo");
        this.setState(
          prevState => ({
            scopesUser: [...prevState.scopesUser, { scope, actions: [action] }]
          }),
          () => {
            console.log(this.state.scopesUser);
          }
        );
      } else {
        console.log("modifico");
        let actions = [...el.actions];
        actions.push(action);
        actions = actions
          .reduce((a, b) => {
            if (a.indexOf(b) < 0) a.push(b);
            return a;
          }, [])
          .sort();
        let index = copyScopes.findIndex(obj => obj.scope === scope);
        copyScopes[index].actions = actions;

        this.setState(
          {
            scopesUser: copyScopes
          },
          () => {
            console.log(this.state.scopesUser);
          }
        );
      }
    } else {
      let actions = [...el.actions];
      actions = actions.filter(item => {
        return item !== action;
      });
      if (actions.length === 0) {
        let scop = copyScopes.filter(ul => {
          return ul.scope != el.scope;
        });
        console.log("rem", el.actions.length);
        this.setState(
          {
            scopesUser: scop
          },
          () => {
            console.log(this.state.scopesUser);
          }
        );
      } else {
        let index = copyScopes.findIndex(obj => obj.scope === scope);
        copyScopes[index].actions = actions;
        this.setState(
          {
            scopesUser: copyScopes
          },
          () => {
            console.log(this.state.scopesUser);
          }
        );
      }
    }
  };

添加：

1. 如果对象不存在，则将其添加到具有操作的状态。

this.onChangeScope ("prop", "read", true);

scopesUser: [
        ...,
        {
          scope: "prop",
          actions: ["read"]
        }
      ]

2. 如果对象存在，那么我只向数组中具有相同名称的对象添加操作。

this.onChangeScope ("make", "read", true);

scopesUser: [
        ...,
        {
          scope: "make",
          actions: ["create", "read", "update", "delete"]
        }
      ]

删除：

1. 如果对象存在，则删除传递的actions属性，如果数组为空，则从状态中删除该对象。

this.onChangeScope ("user", "create", true);

     scopesUser: [
        {
          scope: "make",
          actions: ["create", "update", "delete"]
        }
      ]

我有一些问题。

您能给我一些建议吗？

Answer 1

我希望这是您的意思：

var object = {demonstration: "firstObject"};
    object.added = {newObject: true};
    object.remove = "This will be treated, as it would be removed";
    object.remove = undefined;
    console.log(object);
    console.log(object.remove);

如您所见，您可以定义新状态以添加对象。

我真的不知道如何删除对象，但是如果将其定义为未定义，那应该可以。

我希望这是您的建议，对您有帮助