React Native更新组件

Question

我对react-native很陌生。当我点击停止睡眠或信息按钮时，我向users.json文件发送补丁请求以更改status。我的JSON文件包含;

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

补丁请求发送成功，但在没有重新加载的网页上，我看不到新的状态。这是我的App.js文件;

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;

这是我的Users.js文件;

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;

和User.js文件;

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;

我想在网页上看到状态的即时变化。如果你能帮忙，我会很高兴的。这是我的网页;

web页面

Answer 1

这里的问题是您在随后的方法stopPC,sleepPC和infoPC中请求补丁后状态变化后没有更新users状态，这就是为什么即使状态在服务器中发生了变化，它也没有反映在网页上。

您可以在补丁操作后发送更新的users对象，并更新users状态:

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 })
}

或者简单地传递一个布尔值，并在前端本身用改变的状态更新用户:

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)
}) 
}
}