前提
ラジオボタンを表示するドロップダウンコンポーネント
DropDownForRoomChangeCondo.js
と
そのドロップダウンコンポーネントを表示させているページ
DiscoverCondoRoom.js があります。
実現したいこと
DropDownForRoomChangeCondo.jsにある
handleChangeにてバックエンドにリクエストを送った時に(ラジオボタンを切り替えた時)
DiscoverCondoRoom.js にあるgetDevices();を発火させて画面表示を変えたい。
(ラジオボタンを切り替えた時、デバイスが設置してある部屋の割り当てが変わるので、
表示をアップデートしたい)
発生している問題・エラーメッセージ
現状はhandleChangeにてバックエンドにリクエストを送った時に(ラジオボタンを切り替えた時)
表示のアップデートが起こりません。
該当のソースコード
DropDownForRoomChangeCondo.js
1 2import Dropdown from 'react-bootstrap/Dropdown'; 3 4const DropDownForRoomChangeCondo = (item) => { 5 const history = useHistory(); 6 const [devices, setDevices] = useState([]); 7 8 const handleChange = e => { 9 setVal(e.target.name); 10 setDeviceRoomName(e.target.name); 11 } 12 13 14 const setDeviceRoomName = async(data) => { 15 console.log("Body sent to server", { 16 attributes: 17 [ 18 { 19 entity_id : item.item.entity_id, 20 room_name: data 21 } 22 ] 23 }) 24 await axios.post('xxx.com', 25 { 26 attributes: 27 [ 28 { 29 entity_id : item.item.entity_id, 30 room_name: data 31 } 32 ] 33 }, 34 { 35 headers: { 36 'Content-Type': 'application/json', 37 'Authorization': `Bearer ${cookies.get('accesstoken')}` 38 }, 39 }) 40 .then(result => { 41 console.log('Set Device Room Name!'); 42 getDevices(); 43 }) 44 .catch(err => { 45 console.log(err); 46 console.log('Missed Set Device Room Name!'); 47 }); 48 } 49 50 const getDevices = async(data) => { 51 await axios.get('xxx.com', 52 { 53 headers: { 54 'Content-Type': 'application/json', 55 'Authorization': `Bearer ${cookies.get('accesstoken')}` 56 }, 57 }) 58 .then(result => { 59 console.log(result.data) 60 console.log("bbbbbbbbbbb") 61 setDevices(result.data.attributes); 62 }) 63 .catch(err => { 64 console.log(err); 65 }); 66 } 67 68 69 const keys = [ 70 "camera", 71 "climate", 72 "cover", 73 "light", 74 "lock", 75 "sensor", 76 "switch", 77 ]; 78 79 const entities = keys 80 .map((key) => (devices[key] || []).map((e) => ({ ...e, key }))) 81 .flat(); 82 83 const roomNames = [...new Set(entities.map((entity) => entity.room_name))]; 84 85 86 const [val, setVal] = useState(item.item.room_name); 87 console.log(val) 88 console.log(typeof(val)) 89 90 91 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => ( 92 <a 93 href="" 94 ref={ref} 95 onClick={(e) => { 96 e.preventDefault(); 97 onClick(e); 98 }} 99 > 100 {children} 101 <img className="ic_edit" src={ic_edit} /> 102 </a> 103 )); 104 105useEffect(() => { 106 getDevices(); 107},[]); 108 109 110 return ( 111 <> 112 113 <div className=""> 114 <p>{item.item.room_name}</p> 115 <Dropdown className="room_change_dropdown_top"> 116 117 <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" /> 118 119 <Dropdown.Menu className="room_change_dropdown"> 120 <Dropdown.Item className="room_change_dropdown_item"> 121 {roomNames.map((room_names, i) => ( 122 <div className="flex_radio"> 123 <input 124 className="room_change_radio" 125 type="radio" 126 value={room_names} 127 name={room_names} 128 onChange={handleChange} 129 checked={val === room_names} 130 /> 131 <p className="drop_down_p">{room_names}</p> 132 </div> 133 ))} 134 </Dropdown.Item> 135 </Dropdown.Menu> 136 </Dropdown> 137 </div> 138 139 </> 140 ); 141} 142export default DropDownForRoomChangeCondo; 143
DiscoverCondoRoom.js
1 2const DiscoverCondoRoom = () => { 3 const history = useHistory(); 4 const [devices, setDevices] = useState([]); 5 6 const getDevices = async(data) => { 7 await axios.get('xxx.com', 8 { 9 headers: { 10 'Content-Type': 'application/json', 11 'Authorization': `Bearer ${cookies.get('accesstoken')}` 12 }, 13 }) 14 .then(result => { 15 setDevices(result.data.attributes); 16 }) 17 .catch(err => { 18 console.log(err); 19 }); 20 } 21 22 useEffect(() => { 23 getDevices(); 24 },[]); 25 26 const lll = Object.keys(devices); 27 const object_device_value = Object.values(devices).flat(); 28 29 30 31 const keys = [ 32 "camera", 33 "climate", 34 "cover", 35 "light", 36 "lock", 37 "sensor", 38 "switch", 39 ]; 40 41 const entities = keys 42 .map((key) => (devices[key] || []).map((e) => ({ ...e, key }))) 43 .flat(); 44 45 const roomNames = [...new Set(entities.map((entity) => entity.room_name))]; 46 47 48 49 return ( 50 <> 51 <div className="container condo_container"> 52 {entities.map((entity, i) => ( 53 <DropDownForRoomChangeCondo item={entity} /> 54 ))} 55 </div> 56 </> 57 ); 58} 59}; 60 61 62export default DiscoverCondoRoom; 63
回答1件