@YmBIgo (和也栗原)posted at 2022-01-08

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

Q&A

Closed

解決したいこと

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

発生している問題・エラー

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

簡易コード↓

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

const updateChatHTML = (chat, 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(chat, index) /*該当箇所*/ }
    return(
      ...
      <img src="" className="chat内のclass" />
    )
  )}}
)

該当するソースコード

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

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

自分で試したこと

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

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

Are you sure you want to delete the question?