反应状态不重新呈现

Question

I have the react component from below and the problem is that it's not automatically rendering when the onClick event is detected (triggering the handleClick function).

If I write this.forceUpdate() than it's working fine. This shouldn't be normal, it should be working without it.

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;

Answer 1

Please read the React documentation :

Using State Correctly

There are three things you should know about setState() .

Do Not Modify State Directly

For example, this will not re-render a component:

 // Wrong this.state.comment = 'Hello'; 

Instead, use setState() :

 // Correct this.setState({comment: 'Hello'}); 

The only place where you can assign this.state is the constructor.

[...]

Answer 2

Use this.setState({updating: false}) insted this.state.updating = false; and component will re-render;

To follow @Felix comment, would be better change your function handleClick to

handleClick(){
    this.setState({ updating: !this.state.updating })
}