react データ取得時 then catchの挙動

Question

下記の処理が行われた時に正常に処理が行われればthen()の中の処理が呼ばれると思うのですが.catch(this.handleError)が呼ばれています。
console.logを下記の場所に埋め込んで調べたところthen()の中の処理は呼ばれていました。またctachの処理も呼ばれていたのです。then()とcatchが両方呼ばれることなどあるのでしょうか？
また .catch((e) => console.log('エラー'))が呼ばれたところなのですがデベロッパーツールでは
onDeleteGroup(group, type) {
//この行でcatchのエラーが呼ばれていた。
window.fetchJson(/group/, {
となっていて
thenより前の行で呼ばれていることになっていましたどうしてなのでしょうか？

//追記
.catch((e) => console.log(e))としてみたところTypeError: Invalid attempt to spread non-iterable instanceというエラーでしたどうやって解決できるのでしょうか？

  onDeleteGroup(group, type) {
    window.fetchJson(`/group/`, {
      method: DELETE,
      body: JSON.stringify(humps.decamelizeKeys(
        { Id: [this.state.id], groupId: group.id }
      )),
    }).then(() => this.deleteGroup(group, type))
      //.catch(this.handleError);
      .catch((e) => console.log('エラー'))
  }

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

Answer 1

thenの中でExceptionが発生した場合もcatchの中に入ります。
そのため、この場合では

window.fetchJsonに成功し、thenの中に入る
->deleteGroupでExceptionが発生し、catchの中に入る

という処理の流れになっています。

TypeError: Invalid attempt to spread non-iterable instanceについては展開できないインスタンスを展開しようとしてるときに起こるエラーです。

おそらく...this.state[type]にてthis.state[type]の展開に失敗しているかと思うので、この変数の中身を確認してみると良いかもしれません。

Comments

[cuku]

返信ありがとうございます！setStateしている変数ってどうやって見ればいいのでしょうか？

[dorarep]

`console.log(group);`を`console.log(this.state[type]);`に書き換えて、コンソールで確認してみたらどうでしょう？？

[cuku]

undifindとなっていました

[dorarep]

...this.state[type]の...を消せばとりあえずエラーはなくなるかと思いますー

[cuku]

stateがnullなんてあるのでしょうか？

[dorarep]

state[type]なので、stateの中のtypeで指定された中身が定義されてない場合undefinedになります。

たとえばstate = { name: 'Taro', age: 30 }で、type='name'だとstate[type]で'Taro'が取得できます。
しかしtype='hoge'だとstateの中にhogeはないので、state[type]はundefinedとなります。

[cuku]

一部載せていないコードがあったので記述しました。
Object.assign({}, { [type]: user[type].filter((g) => g.id !== group.id) }では指定したことにはなっていないのでしょうか？

[cuku]

長くなりそうなのでわからないところを別で質問します。
ありがとうございました！！！

[dorarep]

はい！また何かあればぜひー