[React.js]findIndexをすると-1になってしまう

Question

前提・実現したいこと

現在のstateの値をapiサーバからのレスポンスで上書きしようとしています。
しかし、findIndexで適切な値が見つからずpostIndexの値が-1になってしまいます。

該当のソースコード

  updatePost = (id, title, content) => {
    axios.patch(`http://localhost:3001/api/v1/posts/${id}`,{title: title, content: content})
    .then((response) => {
      const postIndex = this.state.posts.findIndex((x) => x.id === id)
      const posts = update(this.state.posts, {[postIndex]: {$set: response.data}})
      this.setState({posts: posts})
      this.props.history.push('/Index');
    })
    .catch((data) =>{
      console.log(data)
    })
  }

stateのPostの内容は以下の通りです

0: {id: 15, title: "b", content: "b", user_id: null, created_at: "2019-09-09T02:54:31.000Z", …}
1: {id: 16, title: "a", content: "a", user_id: null, created_at: "2019-09-09T03:18:59.000Z", …}
2: {id: 17, title: "c", content: "c", user_id: null, created_at: "2019-09-09T03:19:07.000Z", …}
3: {id: 18, title: "d", content: "d", user_id: null, created_at: "2019-09-09T03:19:17.000Z", …}

Comments

[y_waiwai]

そりゃ対象の値がないと-1になりますが、それをどうしたいというはなしでしょうか。
質問がありません

Answer 1

こんにちは

ひとつ前のご質問 からの続きという前提で、ここが怪しいのでは？と思うところを回答します。

ひとつ前のご質問に挙げられているコードで、 updatePost を呼ぶところが、

this.props.updatePost(this.props.match.params.id, this.state.post)

となっているので、

修正前：

const postIndex = this.state.posts.findIndex((x) => x.id === id)

を、以下のように修正すればよいかと思われます。

修正後：

const postIndex = this.state.posts.findIndex((x) => x.id == id)

あるいは、もうちょっときちんと書けば、

修正後：

const postIndex = this.state.posts.findIndex((x) => x.id === parseInt(id, 10))

または、呼ぶ側で数値にするならば、単項加算を使って、

修正後：

this.props.updatePost( +this.props.match.params.id, this.state.post)

としてもよいかもしれません。

以上、参考になれば幸いです。

Comments

[wisheebell]

なるほど
match.params.idは文字列だったんですね
わかりにくい質問で申し訳なかったですが、助かりました。ありがとうございます。

[jun68ykt]

どういたしまして。解決したようで、よかったです????