React Native 更新组件

Question

I'm pretty new to react-native. When I click the stop sleep or info button I send patch requests to the users.json file to change the status . My JSON file contains;

{
  "users": [
    {
      "hostname": "XXX.XX.XX.XXX",
      "username": "username",
      "password": "admin",
      "command": "whoami",
      "status": "sleep",
      "info": "temp",
      "id": 1
    }
  ]
}

Patch request sends successfully but on a web page without reloading, I cant see new status.Here is my App.js file;

import React, { Component } from "react";
import AddUser from "./components/AddUser";
import Users from "./components/Users";
import axios from "axios";



const fs = require('fs');
const path = require('path');

class App extends Component {
    constructor(props) {
        super(props);      

        this.state = {
            users:[],

          };
      
          this.deleteUser = this.deleteUser.bind(this);
          this.addUser = this.addUser.bind(this);
          this.stopPC = this.stopPC.bind(this);
          this.infoPC = this.infoPC.bind(this) ;
          

    }

    async componentDidMount(){
        const response = await axios.get("http://localhost:3002/users");
       // console.log(response);
       this.setState({users:response.data})
    }

     componentWillUnmount(){
      clearInterval(this.interval);
    } 
    

    async statusUpdate(){
      const response = await axios.get("http://localhost:3002/users");
     // console.log(response);
     this.interval = setInterval(() => this.setState({users:response.data.status}),3000)
  }
   
      //AXIOS API
      deleteUser = async (id) => {
        axios.delete('http://localhost:3002/users/'+ id);
       
        let updatedUsers = this.state.users;
        updatedUsers = updatedUsers.filter(user => user.id !== id);
        
        this.setState({
          users : updatedUsers
        })
    
      }

    
      addUser(newUser){
        
        axios({
          method: 'post',
          url: 'http://localhost:3002/users/',
          data: {
            hostname: newUser.hostname,
            username : newUser.username,
            password: newUser.password,
            command : newUser.command,
            status : newUser.status
          }    
        });

        let updatedUsers = this.state.users;
        updatedUsers.push(newUser);
    
        this.setState({
          users : updatedUsers
        })
    
      }

      stopPC(id){
            axios.patch('http://localhost:3002/users/'+id, {
              command:  'shutdown -s -t 0',
            });    
      }

      sleepPC(id){
          axios.patch('http://localhost:3002/users/'+id, {
            command:  'rundll32.exe user32.dll,LockWorkStation',
            status : 'sleep'
          });    
      }

      infoPC(id){
        axios.patch('http://localhost:3002/users/'+id, {
          command:  'whoami',
          status : 'info'
        });    
    }

   


    render() {
        const title = "Remote Control"
        return (
            <div className="container">
            <h1>{title}</h1>
            <hr/>
            <AddUser addUser= {this.addUser}/>
            <hr/>
            <Users deleteUser= {this.deleteUser} users = {this.state.users} stopPC= {this.stopPC} sleepPC= {this.sleepPC}  infoPC={this.infoPC} statusUpdate={this.statusUpdate} />
      </div>
        );
    }
}

export default App;

Here is my Users.js file;

import React , {Component} from "react";
import User from "./User";
class Users extends Component  {
    render(){
        const {users , deleteUser,stopPC,sleepPC,infoPC} = this.props;
        return(
            <table className="table table-dark">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Hostname</th>
      <th scope="col">Username</th>
     
      <th scope="col">Stop</th>
      <th scope="col">Sleep</th>
      <th scope="col">Start</th>
      <th scope="col">Status</th>
      <th scope="col">CPU Temperature</th>
      <th scope="col">Info</th>
      <th scope="col">Delete</th>


    </tr>
  </thead>

  <tbody>
            {
                users.map(user => {
                    const {id,hostname,username,password,command,status,info} = user;
                    return <User key={id}
                        id = {id}
                        hostname = {hostname}
                        username = {username}
                        password = {password}
                        command = {command}
                        status={status}
                        info={info}
                        deleteUser = {deleteUser}
                        stopPC={stopPC}
                        sleepPC = {sleepPC}
                        infoPC = {infoPC}
                    />;
                 })
            }
  </tbody>

</table>
        )
    }
}
export default Users;

And my User.js file;

import React , {Component} from "react";
import Popup from "./Popup";
const axios = require('axios');
const fs = require('fs');
const path = require('path');


class User extends Component  {

    constructor(props) {
        super(props);
        this.state = {
            buttonPopup: false
        };
      }
   

    onDeleteClick(id,e){
        const {deleteUser} =  this.props;

        deleteUser(id);
        
    }

    onStopClick(id,e){
        const {stopPC} =  this.props;

        stopPC(id);
        
    }

    onSleepClick(id,e){
        const {sleepPC} =  this.props;

        sleepPC(id);
        
    }

    onStartClick(id,e){
        
    }

    buttonPopupfunc(id,e){
        this.setState({buttonPopup : true})
    }

    infofunc(id,e){
        const {infoPC} =  this.props;

        infoPC(id);
    }
   
    render(){
        const {id,hostname,username,status,info,cpuTemp} = this.props;

        return(
            <tr>
                <td>{id}</td>
                <td>{hostname}</td>
                <td>{username}</td>      
                <td><button onClick={() =>{this.onStopClick.bind(this,id);document.location.reload(true)}} className="btn btn-danger">Stop</button></td>
                <td><button onClick={this.onSleepClick.bind(this,id)} className="btn btn-warning">Sleep</button></td>
                <td><button onClick={this.onStartClick.bind(this,id)} className="btn btn-success">Start</button></td>
                <td>{status}</td>
                <td>{cpuTemp}</td>
                <td><button  onClick={() => {this.buttonPopupfunc();this.infofunc(id);}} type="button" class="btn btn-info">&#128712;</button>
                
                <Popup trigger = {this.state.buttonPopup} setTrigger = {() =>this.setState({buttonPopup : false})} >
                <text>{this.infos}</text>
                </Popup>
                
                </td>
            
                <td><button onClick={this.onDeleteClick.bind(this,id)} className="btn btn-danger">Delete</button></td>



            </tr>
            
        )
    }
}

export default User;

I want to see the instant change in status on the web page.I will be glad if you help. Here is my web page;

web page

Answer 1

The issue here is you have not updated the users state following the status change after the patch request in the subsequent methods stopPC , sleepPC and infoPC which is why even though the status has changed in the server, it does not reflect in the webpage.

You can send the updated users object after the patch operations and update the users state with that:

sleepPC = async (id) => {
  const res = await axios.patch('http://localhost:3002/users/'+id, {
    command:  'rundll32.exe user32.dll,LockWorkStation',
    status : 'sleep'
  );  
  this.setState({ users: res })
}

or simply pass a boolean for the same and update the user with the changed status in the frontend itself:

sleepPC = async (id) => {
  const res = await axios.patch('http://localhost:3002/users/'+id, {
    command:  'rundll32.exe user32.dll,LockWorkStation',
    status : 'sleep'
  );  
  if (res) {
    this.setState({
      users: this.state.users.map(user => user.id === id ? { ...user, status: 'sleep' } : user)
    }) 
  }
}