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

Question

前提

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

実現したいこと

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

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

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

該当のソースコード

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;

            {
                "state": "Locked",
            },

Answer 1

getDevicesではsetLockが呼び出されているため、Lockのstateが変更され
最新のものになっていますが、
onClickで呼び出される、Lock,Unlockではstateが変更される文面がないため、
console上でのデータが正しくとも、画面は変わらないという状況になっているように思えます。

Lock,Unlockのthenのところでstateを更新してあげてください

Comments

[Tomato_leaf]

thenのところにgetDevices()を入れ込むとうまく行きました！ありがとうございます！