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

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

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

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

Q&A

解決済

1回答

615閲覧

React.jsにてバックエンドからGetした情報をラジオボタンに反映させたい

Tomato_leaf

総合スコア173

React.js

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

0グッド

0クリップ

投稿2022/12/29 07:33

編集2022/12/29 19:00

前提

家電をWebsiteでコントールするアプリのフロントエンド側をReact.jsで作っています。

実現したいこと

バックエンドからGetしたカメラのポジションをラジオボタンに反映させたい

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

下記がコードなのですが、ラジオボタンにチェックがつかず、原因がわからずにおります。
イメージ説明

コンソールにはcamera_position変数に情報が入っているのが確認できます。
イメージ説明

該当のソースコード

Json

1{ 2 "attributes": { 3 "camera": [ 4 { 5 "entity_id": "camera_2", 6 "mode": "Away", 7 "state": "Away", 8 }, 9 ], 10}

React.js

1const { entity_id } = useParams(); 2const [camera_position, setCameraPosition] = useState(); 3 4const getDevices = async(data) => { 5 await axios.get('xxx.com', 6 { 7 headers: { 8 'Content-Type': 'application/json', 9 'Authorization': `Bearer ${cookies.get('accesstoken')}` 10 }, 11 }) 12 .then(result => { 13 console.log(result.data) 14 setCamera(result.data.attributes.camera); 15 setCameraPosition(result.data.attributes.camera.filter(c => c.entity_id === entity_id).map((item,i) => item.mode)); 16 }) 17 .catch(err => { 18 console.log(err); 19 }); 20} 21 22const setCameraHome = async(data) => { 23 await axios.post('xxx.com/camera/set_home', 24 { 25 entity_id: entity_id, 26 }, 27 { 28 headers: { 29 'Content-Type': 'application/json', 30 'Authorization': `Bearer ${cookies.get('accesstoken')}` 31 }, 32 }) 33 .then(result => { 34 console.log(result.data) 35 console.log('Set Home!'); 36 setCameraPosition('Home'); 37 getDevices(); 38 }) 39 .catch(err => { 40 console.log('Missed Set Home!'); 41 console.log(err); 42 }); 43} 44 45const setCameraAway = async(data) => { 46 await axios.post('xxx.com/camera/set_away', 47 { 48 entity_id: entity_id, 49 }, 50 { 51 headers: { 52 'Content-Type': 'application/json', 53 'Authorization': `Bearer ${cookies.get('accesstoken')}` 54 }, 55 }) 56 .then(result => { 57 console.log(result.data) 58 console.log('Set Away!'); 59 setCameraPosition('Away'); 60 getDevices(); 61 62 }) 63 .catch(err => { 64 console.log('Missed Set Away!'); 65 console.log(err); 66 }); 67} 68 69 70return ( 71 <div> 72 <input 73 type="radio" 74 value="Home" 75 onChange={setCameraHome} 76 checked={camera_position === 'Home'} 77 /> 78 <input 79 type="radio" 80 value="Away" 81 onChange={setCameraAway} 82 checked={camera_position === 'Away'} 83 /> 84 </div> 85)

追記

ちなみに

const [camera_position, setCameraPosition] = useState(); camera_position2 = camera_position[0];

とするとコンソールに

Uncaught TypeError: Cannot read properties of undefined (reading '0')

とでます。。

追記2

useEffect(() => {
console.log("camera_position");
console.log(camera_position);
},[]);

と書くと、下記写真のように出ます。
イメージ説明

追記3

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2022/12/29 07:42

getDevices で setCameraPosition するときに配列になってるような…。
Tomato_leaf

2022/12/29 07:50

ありがとうございます。写真2枚目のことでしょうか?たとえば、追記のようにしてみたのですが、頓珍漢なことをしていたりしますでしょうか?
j.f15

2022/12/29 09:02

追記のログ出力ですが、 useEffect(() => { console.log("camera_position"); console.log(camera_position); }, [camera_position]); みたいなコードにした場合はどんなログが出力されますか?
Tomato_leaf

2022/12/29 09:17

ありがとうございます。上記のように書くとエラーが出るので、追記2のように書きました。
yuma.inaura

2022/12/29 09:21

result.data はどうなっているんでしょう?
Tomato_leaf

2022/12/29 09:36 編集

ありがとうございます。わかりにくいかもですが 追記3にて写真を添付しました。シンプルにしたものがJsonのようになっています。
j.f15

2022/12/29 09:47

追記ありがとうございます。 「上記のように書くとエラーが出るので」どうしてエラーが出るのか謎なので何とも言えないのですが、自分も配列関連が原因じゃないのかなと思います。 「コンソールにはcamera_position変数に情報が入っているのが確認できます。」 最終的に camera_position の値に ['Away'] が入っているのなら checked={camera_position === 'Away'} でtrueにはならないので。 そもそもfilter自体、配列を返す処理だったような気がするので、 hoshi-takanori さんも述べているように setCameraPosition で代入する処理周りが怪しい気がしますね。
Tomato_leaf

2022/12/29 10:00

ありがとうございます。 解決できました!
guest

回答1

0

自己解決

みなさま、ありがとうございます。

<div> <input type="radio" value="Home" onChange={setCameraHome} checked={camera_position[0] === 'Home'} /> <input type="radio" value="Away" onChange={setCameraAway} checked={camera_position[0] === 'Away'} /> </div>

でうまくチェックがつくようになりました。

投稿2022/12/29 09:59

Tomato_leaf

総合スコア173

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問