[英]React state not rerendering
我有下面的react組件,問題是當檢測到onClick事件(觸發handleClick函數)時,它不會自動呈現。
如果我寫this.forceUpdate()則工作正常。 這不應該是正常的,沒有它應該可以正常工作。
import React from 'react';
import Loading from './Loading';
import CameraStore from "../stores/CameraStore";
import * as CameraActions from "../actions/CameraActions";
class LocationCameras extends React.Component {
constructor(props){
super(props);
this.state = {
updating: false
};
this.handleClick = this.handleClick.bind(this)
}
handleSwitch(){
}
handleClick(){
if(this.state.updating == false){
this.state.updating = true;
} else if (this.state.updating == true) {
this.state.updating = false;
}
console.log(this.state.updating);
this.forceUpdate();
}
render(){
var that = this;
return(
<div className="cameras">
<div className="panel panel-default">
<div className="panel-heading">
Client: {this.props.locationName}
<span className='camera--make-updates' onClick={this.handleClick} >
Update
</span>
</div>
<div className="panel-body">
{
this.props.cameras.map(function(camera,index){
if (camera.disabled !== "1"){
var statusClassName;
var checkStatus;
if (camera.status == 1){
var statusClassName = 'location--camera active';
checkStatus = true;
}
else {
var statusClassName = 'location--camera disabled';
checkStatus = false;
}
var handleSwitch = function(event){
var cameraId = camera.cameraId;
that.handleSwitch(event, cameraId, index);
}
return (
<div className={statusClassName} key={camera.cameraId}>
{
that.state.updating == true ? (
<div className="camera--switch">
<input type="checkbox" id={'switch' + camera.cameraId} defaultChecked={checkStatus} onChange={handleSwitch} className="switch--input"/>
<label htmlFor={'switch' + camera.cameraId} className="switch--label"></label>
</div>
) : (
<div className="camera--status"></div>
)
}
<div className="camera--name-id">
{ camera.name !== '' ? (
camera.name
) : (
'#' + camera.cameraId
)
}
</div>
</div>
)
}
}
)
}
</div>
</div>
</div>
)
}
}
module.exports = LocationCameras;
請閱讀React文檔 :
正確使用狀態
關於
setState()
您應該了解三件事。不要直接修改狀態
例如,這不會重新渲染組件:
// Wrong this.state.comment = 'Hello';
而是使用
setState()
:// Correct this.setState({comment: 'Hello'});
可以分配
this.state
的唯一地方是構造函數。[...]
使用this.setState({updating: false})
this.state.updating = false;
並且組件將重新渲染;
要遵循@Felix注釋,最好將您的函數handle更改為
handleClick(){
this.setState({ updating: !this.state.updating })
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.