React の map ループ内で JSON を取得し HTML を更新した。

Question

前提・実現したいこと

React で map のループ文内で、axios や fetch などを使い JSONデータ を取得して、HTML に反映させるコードを書きたいです。

発生している問題・エラーメッセージ

現状では、ループ文を宣言した後で、無理矢理 関数を呼び出して（下記コードの該当箇所）、document.getElement で内容を更新しています。
一応動いていてはいますが、JSX の return してない部分で関数呼び出すのが良くなさそうなので質問しました。

簡易コード↓

const chats = useSelector(state => state.chats) /* Redux を使用 */

const updateChatHTML = (index) => {
  axios({url: "some_url"}).then((response) => {
    ...
    let some_html = document.getElementsByClassName("chat内のclass")[index]
  })
    some_html.setArrribute("src", response.data.some_data.image)
}

return(
  {chats.map((chat, index) => {
    { updateChatHTML(index) /*該当箇所*/ }
    return(
      ...
      <img src="" className="chat内のclass" />
    )
  )}}
)

該当のソースコード

  { updateChatHTML(index) /*該当箇所*/ }

map の ループ文の JSX で return していない部分で関数を呼び出しました。

試したこと

また、useEffect 内で、axios を使った関数で chats のデータを使って、useState を使った 別の変数 updated_chat を作り、それを mapループで回すのも試しましたが、動きませんでした。

簡易コードだけですが、よろしくお願いします。

Comments

[maisumakun]

> また、useEffect 内で、axios を使った関数で chats のデータを使って、useState を使った 別の変数 updated_chat を作り、それを mapループで回すのも試しましたが

具体的にコードをご提示いただければと思います。

[KazuyaKurihara]

もう一度コードを書いてみます。
確か asnyc await なんかでうまくいきませんでした。

もしくは、image のクラスの onload なんかで実装するのも考えています。

Answer 1

React で map のループ文内で、axios や fetch などを使い JSONデータ を取得して、HTML に反映させるコードを書きたいです。

ループの中身を別コンポーネントに切り出して処理させるほうがいいかと思います。

Comments

[KazuyaKurihara]

別コンポーネントにして、useState (×→createRef で dom操作なし) で 対応できました。
ありがとうございます。