我對 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" >🛈</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;
我想在網頁上看到狀態的即時變化。如果你能提供幫助，我會很高興。這是我的網頁；
網頁
uj5u.com熱心網友回復：
這里的問題是你在后續的方法中users請求補丁后的狀態變化后沒有更新狀態stopPC，這就是為什么即使服務器中的狀態發生了變化，它也沒有反映在網頁中。sleepPCinfoPC
您可以在補丁操作之后發送更新的用戶物件并使用以下內容更新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: users.map(user => user.id === id ? { ...user, status: 'sleep' } : user)
})
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465026.html
標籤：javascript 反应 反应式 网络
上一篇：顫動中的下拉選單