リアクション状態が再レンダリングされない

Question

私は以下のリアクションコンポーネントを持っています。問題は、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; 

Answer 1

使用this.setState({updating: false})はthis.state.updating = false; instedとコンポーネントが再レンダリングされます。 @Felixコメントに従って

、より良い

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

Answer 2

にあなたの関数のhandleClickを変更されるだろうしてくださいread the React documentation：

状態を使用して

正しく

あなたが知っておくべき三つのことを約setState()あり。

は、例えば直接

をステートを変更しない、これはありません再レンダリングコンポーネントは以下となります。その代わり

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

、setState()を使用します。

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

どこあなたができる唯一の場所を代入するのはthis.stateです。

[...]