質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

KazuyaKurihara
KazuyaKurihara

総合スコア3

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

379閲覧

投稿2022/01/08 10:02

前提・実現したいこと

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ループで回すのも試しましたが、動きませんでした。

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

maisumakun

2022/01/08 10:16

> また、useEffect 内で、axios を使った関数で chats のデータを使って、useState を使った 別の変数 updated_chat を作り、それを mapループで回すのも試しましたが 具体的にコードをご提示いただければと思います。
KazuyaKurihara

2022/01/08 10:43

もう一度コードを書いてみます。 確か asnyc await なんかでうまくいきませんでした。 もしくは、image のクラスの onload なんかで実装するのも考えています。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。