前提
家電を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
getDevices で setCameraPosition するときに配列になってるような…。
ありがとうございます。写真2枚目のことでしょうか?たとえば、追記のようにしてみたのですが、頓珍漢なことをしていたりしますでしょうか?
追記のログ出力ですが、
useEffect(() => {
console.log("camera_position");
console.log(camera_position);
}, [camera_position]);
みたいなコードにした場合はどんなログが出力されますか?
ありがとうございます。上記のように書くとエラーが出るので、追記2のように書きました。
result.data はどうなっているんでしょう?
ありがとうございます。わかりにくいかもですが
追記3にて写真を添付しました。シンプルにしたものがJsonのようになっています。
追記ありがとうございます。
「上記のように書くとエラーが出るので」どうしてエラーが出るのか謎なので何とも言えないのですが、自分も配列関連が原因じゃないのかなと思います。
「コンソールにはcamera_position変数に情報が入っているのが確認できます。」
最終的に camera_position の値に ['Away'] が入っているのなら
checked={camera_position === 'Away'} でtrueにはならないので。
そもそもfilter自体、配列を返す処理だったような気がするので、
hoshi-takanori さんも述べているように setCameraPosition で代入する処理周りが怪しい気がしますね。
ありがとうございます。
解決できました!
回答1件
あなたの回答
tips
プレビュー