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

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

新規登録して質問してみよう
ただいま回答率
86.12%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

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

解決済

React.jsでバックエンドのJsonの値が変わる時に 写真の表示を切り替えたい

Tomato_leaf
Tomato_leaf

総合スコア148

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

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

1回答

0リアクション

0クリップ

184閲覧

投稿2022/09/12 08:35

編集2022/09/12 08:37

前提

現在、家の電気機器をWebでコントールできるシステムを作っています。
Backendはできていて、
バックエンドの状態によって
アイコンの切り替えをしたいと考えています。

実現したいこと

バックエンドのJsonの値が変わる時に
アイコンの表示を切り替えたい

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

Onclickの箇所をクリックしたときに
バックエンドのJsonの値は変わっているが
写真の表示切り替えが発生しない

イメージ説明

該当のソースコード

React.js

import React, { useState, useEffect, useCallback, onClick} from 'react'; import axios from 'axios'; import ic_locked from "../../images/icons/ic_locked.png" import ic_unlockeds from "../../images/icons/ic_unlockeds.png" const LockDetail = () => { const [lock, setLock] = useState([]); const Unlock = async(data) => { await axios.post('xxx.com/unlock', { entity_id: entity_id, }, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cookies.get('accesstoken')}` }, }) .then(result => { console.log(result.data); console.log('Unlocked!'); alert('Unlocked!'); }) .catch(err => { console.log(err); console.log('Unlocked Missed!'); }); } const Lock = async(data) => { await axios.post('xxx.com/lock', { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cookies.get('accesstoken')}` }, }) .then(result => { console.log(result.data); console.log('Locked!'); alert('Locked!'); }) .catch(err => { console.log(err); console.log('Locked Missed!'); }); } const getDevices = async(data) => { await axios.get('xxx.comm/device_list', { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cookies.get('accesstoken')}` }, }) .then(result => { console.log(result.data) setLock(result.data.attributes.lock); }) .catch(err => { console.log(err); }); } useEffect(() => { getDevices(); }, []); return ( <div className="container"> <div className="row mx-auto text-center"> <> {lock.map((item,i) => <div key={i} className="col-12"> <div className="box"> <p>Lock Status</p> {item.state == "Locked" ? <img className="" src={ic_locked} /> : <img className="" src={ic_unlockeds} /> } <p className="state">{item.state}</p> </div> {item.state == "Locked" ? <img className="" src={ic_unlockeds} onClick={Lock}/> : <img className="" src={ic_locked} onClick={Unlock}/> } </div> )} </> </div> </div> ); } export default LockDetail;

Json

{ "state": "Locked", },

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

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