javascript - React - 渲染前的 SetState
问题描述
我有一个页面呈现服务器名称标题等。
它对在线、离线和警告的服务器进行计数。当它第一次渲染时它工作正常,但是当我添加一个服务器并将它添加到数组时。
它更新行但不更新服务器计数,因为它直到我更新服务器计数后才呈现。
我使用 componentDidMount 在启动时修复它,但在更新时没有。
不确定您是否需要更多信息。
class App extends Component {
constructor(props) {
super(props);
this.state = {
serverCount: [],
servers: [
{
host: "192.168.57.2",
status: "Online",
title: "Server",
location: "Location"
},
{
host: "192.168.57.1",
status: "Offline",
title: "Server",
location: "Location"
},
{
host: "192.168.57.0",
status: "Warning",
title: "Server",
location: "Location"
}
]
};
this.handleFormData = this.handleFormData.bind(this);
}
handleServerCount() {
let newArr = [0,0,0,0]
this.state.servers.map(data => {
let status = data.status
if(status === "Online"){
newArr[1]++
} else if (status === "Warning") {
newArr[2]++
} else {
newArr[3]++
}
newArr[0]++
})
return newArr;
}
handleFormData(data) {
let newArr = this.handleServerCount();
let newState = this.state.servers.slice();
newState.push(data);
this.setState({
servers: newState,
serverCount: newArr
});
}
componentDidMount(){
let newArr = this.handleServerCount();
this.setState({
serverCount: newArr
})
}
render() {
return (
<Default>
<div className="upperContainer">
<ServerCount serverCount={this.state.serverCount} />
<RequestTimer />
</div>
<ServerList serverList={this.state.servers} />
<Input handleFormData={this.handleFormData} />
</Default>
);
}
}
class ServerList extends Component {
render() {
const rows = [];
this.props.serverList.forEach((server) => {
rows.push(
<ServerRow key={server.host}
title={server.title}
host={server.host}
location={server.location}
status={server.status}/>
)
})
return (
<ListTable>
<ServerHeader/>
{rows}
</ListTable>
)
}
}
const ServerCount = (props) => {
return (
<CountContainer>
<div className="circleContainer">
<div className="total serverCircle">
{props.serverCount[0]}
</div>
Total
</div>
<div className="circleContainer">
<div className="Online serverCircle">
{props.serverCount[1]}
</div>
Online
</div>
<div className="circleContainer">
<div className="Warning serverCircle">
{props.serverCount[2]}
</div>
Warning
</div>
<div className="circleContainer">
<div className="Offline serverCircle">
{props.serverCount[3]}
</div>
Offline
</div>
</CountContainer>
)
}
class Input extends Component {
constructor(props) {
super(props);
this.state = {
host: "",
title: "",
location: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
const {name, value} = e.target;
this.setState({
[name]: value
})
}
handleSubmit(e) {
e.preventDefault();
var newServer = {
host: this.state.host,
status: "Warning",
title: this.state.title,
location: this.state.location,
}
this.setState({
host:'',
title:'',
location:''
})
this.props.handleFormData(newServer);
}
render() {
return (
<InputForm onSubmit={this.handleSubmit}>
<input name="host" value={this.state.host} onChange={this.handleChange} placeholder="10.10.10.0"></input>
<div><span>Unknown</span></div>
<input name="title" value={this.state.title} onChange={this.handleChange} placeholder="Live Server"></input>
<input name="location" value={this.state.location} onChange={this.handleChange} placeholder="Knutsford"></input>
<button type="submit"></button>
</InputForm>
);
}
}
解决方案
handleServerCount() {
let newArr = [...this.state.serverCount]
this.state.servers.map(data => {
let status = data.status
if(status === "Online"){
newArr[1]++
} else if (status === "Warning") {
newArr[2]++
} else {
newArr[3]++
}
newArr[0]++
})
return newArr;
}
推荐阅读
- sql - 根据某列的 MAX 值选择不同的行
- rust - proc_macro_attribute 似乎不能很好地与 struct impls 和 traits 配合使用
- javascript - 开发模式下的 API 请求不同于生产模式下的 API 请求
- python - 图像到二维数组的转换耗时太长
- flutter - 使用 Flutter AudioPlayers 播放其他媒体时停止音频
- docker - 容器化 Jenkins:在内部网络中建立与 docker 云的连接
- python - 如何创建变量以循环文件并出现在数据框中?
- antlr4 - antlr:如何避免识别规则中的空格
- github - Github Actions: [remote denied] master -> master (shallow update not allowed), error: failed to push some refs
- python - Python3,修复 JSON 缺少双引号问题