react stateの値の入れ方

Question

[type]: [...this.state[type], group]で TypeError: Invalid attempt to spread non-iterable instanceというエラーになっています。
console.log(this.state[type])としたところundifindとなっていました。
どうやってthis.state[type]に値を入れてあげればいいのでしょうか？

    const Types = { groups: 'groups', apGroups: 'apGroups' };    


    constructor(props) {
    super(props);

    const { groups, apGroups } = props;

    this.state = {
      groups,
      apGroups,
      user,


    this.onClickDeleteGroup = this.onClickDeleteGroup.bind(this);
  }


// onClickDeleteGroupには引数として(groups, Types.apGroups)を渡しています
  onClickDeleteGroup(group, type) {
    window.fetchJson(`/group/`, {
      method: DELETE,
      body: JSON.stringify(humps.decamelizeKeys(
        { groupId: group.id }
      )),
    }).then(() => this.deleteGroup(group, type))
      .catch((e) => console.log(e));
  }

    deleteGroup(group, type) {
    const temp = Object.assign({}, { [type]: user[groupType].filter((g) => g.id !== group.id) }
    );
    console.log(this.state[type])
    this.setState({
      user: temp,
      [type]: [...this.state[type], group],
      isSnackBar: true,
      snackBarMessage: '削除しました。',
    });
  }

Comments

[hoshi-takanori]

ちょっと何をしたいコードなのか、よく分かりません。deleteGroup の引数 group, type にはそれぞれどのような値が渡されるのでしょうか？

[cuku]

group には
{id:0, name:太郎}
{id:1, name:佐藤}みたいな値が渡されます
typeは上記に記載している通り、Types.apGroupsが渡されます

[hoshi-takanori]

やっぱりよく分かりません。types は常に 'apGroups' ってことですか？ だとしたら this.state[type] は this.state.apGroups で、その初期値はコンストラクタの props.apGroups ってことですが、その値は？
また、「props を state にコピーしないでください。これはよくある間違いです。」ってのは読みました？
https://ja.reactjs.org/docs/react-component.html#constructor

Answer 1

よくわからないですが、this.state.'キーの名前' = '値';
ではないんですか？