React にてUncought TypeError: Cannot read propertiesというエラーがでます。。。

前提

Reactでカメラのポジションを変更するシステムを作っています。
バックエンドはできていて、バックエンドの状態（初期カメラのポジション）を反映させるところで
つまずいています。

実現したいこと

ページを開いた初期画面にて
ドロップダウンメニューにあるラジオボタン（HomeとAwayがあります。）に
バックエンドの状態を反映させたい。

例えばバックエンドのカメラのポジション（modeフィールド）がHomeなら
Homeにラジオボタンにチェックがされている。

反対に
バックエンドのカメラのポジション（modeフィールド）がAwayなら
Awayにラジオボタンにチェックがされている。

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

初期画面で

console.log(camera_position);

の部分をコンソールで確認すると

[]

となっており、
中身がありません。
しかし、
例えばラジオボタンでHomeを選択するなりして、
レンダリングすると

['Home']

と表示されます。。。
この理屈がよくわかりません。。。
その後、Homeを取り出そうと

console.log(camera_position[0]);

と書き、リロードすると、

Uncought TypeError: Cannot read properties of Light.js undefined (reading "0")

というエラーがでます。。。

該当のソースコード

cameraのJson
1entity_id: "camera_3"
2mode: "Home"

Camera.js
1const Camera = (props) => {
2    
3  const { entity_id } = useParams();
4  const [camera, setCamera] = useState([]);
5  const [camera_position, setCameraPosition] = useState();
6     
7      const setCemaraHome = async(data) => {
8        console.log("Body sent to server", {
9          entity_id: entity_id, 
10        })
11        await axios.post('xxx.com',
12        {
13          entity_id: entity_id, 
14        },
15          {
16            headers: {
17              'Content-Type': 'application/json',
18              'Authorization': `Bearer ${cookies.get('accesstoken')}`
19            },
20          })
21          .then(result => {
22            console.log(result.data)
23            console.log('Set Home!');
24            setVal('Home');
25            getDevices();
26          })
27          .catch(err => {
28            console.log(err);
29          });
30      }
31    
32      const setCemaraAway = async(data) => {
33        console.log("Body sent to server", {
34          entity_id: entity_id, 
35        })
36        await axios.post('xxx.com/',
37        {
38          entity_id: entity_id, 
39        },
40          {
41            headers: {
42              'Content-Type': 'application/json',
43              'Authorization': `Bearer ${cookies.get('accesstoken')}`
44            },
45          })
46          .then(result => {
47            console.log(result.data)
48            console.log('Set Away!'); 
49            setVal('Away');
50            getDevices();
51    
52          })
53          .catch(err => {
54            console.log(err);
55          });
56      }
57    
58    const getDevices = async(data) => {
59      await axios.get('https://xxx.com/',
60        {
61          headers: {
62            'Content-Type': 'application/json',
63            'Authorization': `Bearer ${cookies.get('accesstoken')}`
64          },
65        })
66        .then(result => {
67          console.log(result.data)
68          setCamera(result.data.attributes.camera);  
69          setCameraPosition(camera.filter(c => c.entity_id === entity_id).map((item,i) =>  item.mode)); 
70
71        })
72        .catch(err => {
73          console.log(err);
74        });
75    }
76    
77    
78    
79    // for Home mode Dropdown 
80    const [val, setVal] = useState(camera_position[0]);
81    
82    
83    console.log(camera_position[0]);
84    console.log(val);
85
86
87    return (
88        
89                          <Dropdown.Menu className="home_mode_dropdown">
90                            <Dropdown.Item className="home_mode_dropdown_item">
91                                <div className="ic_schedule_label flex">
92                                  <input
93                                    className="home_mode_radio"
94                                    type="radio"
95                                    value="home"
96                                    onChange={setCemaraHome}
97                                    checked={val === 'Home'}
98                                  />
99                                  <img className="ic_home_mode" src={ic_home_mode} />
100                                  <p className="radio_text">Home</p>
101                                </div>
102                            </Dropdown.Item>
103                            <Dropdown.Item className="home_mode_dropdown_item">
104                                <div className="ic_schedule_label flex">
105                                  <input
106                                    className="home_mode_radio"
107                                    type="radio"
108                                    value="away"
109                                    onChange={setCemaraAway}
110                                    checked={val === 'Away'}
111                                  />
112                                  <img className="ic_away_mode" src={ic_away_mode} />
113                                  <p className="radio_text">Away</p>
114                                </div>
115                            </Dropdown.Item>
116                          </Dropdown.Menu>
117                        </Dropdown>    
118        
119        
120    );
121
122}
123export default Camera;

行動規範の内容に同意します

回答2件

バックエンドはできていて、バックエンドの状態（初期カメラのポジション）を反映させるところで
つまずいています。

こちらの「バックエンドの状態」が、「①このファイル（Camera.js）内でfetchして取得するもの」なのか「②propsで渡されるもの」なのかによって対応が異なるかと思います。

「①このファイル内でfetchして取得するもの」の場合、fetchする処理が定義されていますが、初期段階で実行している部分がありません。useEffect等を使用して初回に実行されるようにし、バックエンドの状態をstateに反映させれば問題ないかと思います。

「②propsで渡されるもの」の場合、propsで渡ってきた情報をstateに反映させる処理が見当たりません。初期段階でpropsをstateに反映させる処理を書いてあげれば問題ないかと思います。

投稿2022/12/30 17:22

WAKO_program

総合スコア4

Tomato_leaf

2023/01/04 06:54

ありがとうございます。１のパターンでUseEffectを書くのを忘れていました。。失礼しました。上記のような方法で解決しました！

行動規範の内容に同意します

自己解決

const getDevices = async(data) => {
  await axios.get('xxx.com',
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log(result.data)
      setCamera(result.data.attributes.camera);  
      setCameraPosition(result.data.attributes.camera.filter(c => c.entity_id === entity_id).map((item,i) =>  item.mode)); 
    })
    .catch(err => {
      console.log(err);
    });
}


useEffect(() => {
  getDevices();
},[]);

そして

                      <Dropdown.Menu className="home_mode_dropdown">
                        <Dropdown.Item className="home_mode_dropdown_item">
                            <div className="ic_schedule_label flex">
                              <input
                                className="home_mode_radio"
                                type="radio"
                                value="Home"
                                onChange={setCameraHome}
                                checked={camera_position[0] === "Home"}
                              />
                              <img className="ic_home_mode" src={ic_home_mode} />
                              <p className="radio_text">Home</p>
                            </div>
                        </Dropdown.Item>
                        <Dropdown.Item className="home_mode_dropdown_item">
                            <div className="ic_schedule_label flex">
                              <input
                                className="home_mode_radio"
                                type="radio"
                                value="Away"
                                onChange={setCameraAway}
                                checked={camera_position[0] === "Away"}
                              />
                              <img className="ic_away_mode" src={ic_away_mode} />
                              <p className="radio_text">Away</p>
                            </div>
                        </Dropdown.Item>
                      </Dropdown.Menu>
                    </Dropdown>

上記のように書くとうまくいきました！

投稿2023/01/04 06:52

Tomato_leaf

総合スコア173