functionalComponentの非同期関数内のsetStateによる再レンダリングについて。

Question

つまづいたこと

APIにfetchでデータベースにアクセスして、setStateしたときに再レンダリングがされない。

＜レンダリング先＞

<div>
  {
    (searchResult.data)
       ?searchResult.data.map((ingredient, i) => {
        <div>{ingredient.food}</div>
       })
       :<div></div>
                        
     }
</div>

＜setState元＞

function search(e) {
    if(e!==""){
      fetch(`APIsomething`)
      .then(res =>{
        return res.json()
      }).then(data => {
        setSearchResult({})
        setSearchResult(data)
      })
    }
    setIngredientLoading(false);
  }

＜search呼び出し＞（inputのonChange）

　function onChangeField (e){
      console.log(e.target.value)
      setSearchWord(e.target.value)
      setIngredientLoading(true)
      search(e.target.value)
    }

非同期処理関数内でsetStateを使うのがダメ？

{...data}も試したけど、展開が足りていなかったのかもしれない。
もしくは非同期処理のせいかもしれない。
詳しい方教えてください。

Comments

[A_kirisaki]

search を呼んでいる部分を載せていただけますか？

[MOTOMUR]

失礼しました。追記しました。

[A_kirisaki]

search 内で console.log(res) と console.log(data) はしてみましたか？

[hoshi-takanori]

非同期で setState することは問題ありませんが、setSearchResult を 2 回続けて呼んでも意味ないですし、setIngredientLoading は読み込みが終了する前に呼ばれてしまってます。それでも fetch に成功すれば表示は更新されそうに見えますが、更新されないなら fetch または json への変換に失敗してる可能性が高いと思うので、A_kirisaki さんがおっしゃる通り console.log で確認しましょう。

[MOTOMUR]

>resとdataは問題なく出力できています。

>setSearchResult を2回呼んだら再レンダリングされるかなとテストで追加していますが結果はもちろんダメです。
もともとasync awaitでfetch部分とsearchを記述していましたが、onChangeでテキストフィールドの入力e.target.valueをsetstateする前に動作してしまったため、変更しております。質問に乗せたコードではfetchまではうまく行ってます、setState後のレンダリングができていません。
searchResultはpropsで子コンポーネントに渡しています。

再レンダリングのルールから何かしらの理由で外れている気がします。
補足:res.json()
{data:{//object some},data2:{//object some}}

Answer 1

レンダリング先のこの部分ですが、

       ?searchResult.data.map((ingredient, i) => {
        <div>{ingredient.food}</div>
       })

searchResult.data という配列の各要素に対して、

       (ingredient, i) => {
        <div>{ingredient.food}</div>
       }

というアロー関数を実行して、その結果を配列にしてますが、この関数が値を返してないからですね。

明示的に return を書くか、

       ?searchResult.data.map((ingredient, i) => {
        return <div>{ingredient.food}</div>
       })

{ } を削除 (または ( ) に変更) して => の先にブロックではなく一つの式がある状態にしてその値が return されるようにするといいと思います。

       ?searchResult.data.map((ingredient, i) =>
        <div>{ingredient.food}</div>
       )

       ?searchResult.data.map((ingredient, i) => (
        <div>{ingredient.food}</div>
       ))

参考: アロー関数 - JavaScript | MDN<

Comments

[MOTOMUR]

初歩的なところでつまづいていました。失礼しました。ありがとうございます！