React js状態を変更してもコンポーネントが更新されない

Question

ボタンをクリックするとボタンの色が赤に変わるはずですが、状態を変更してコンポーネントのクラスを更新して、それが正常に戻ります。何とかして、コンポーネントを更新して再レンダリングしません。 マイコード：

import React from "react"; 
import ReactDom from "react-dom"; 

const app = document.getElementById("app"); 
class Layout extends React.Component{ 
constructor(props){ 
    super(props); 
    this.users =[ 
      { 
       name:"user1", 
       world:"88", 
      },{ 
       name:"user12", 
       world:"882", 
      },{ 
       name:"user13", 
       world:"883", 
      },{ 
       name:"user14", 
       world:"884", 
      },{ 
       name:"user14", 
       world:"884", 
      },{ 
       name:"user15", 
       world:"885", 
      },{ 
       name:"user16", 
       world:"886", 
      },{ 
       name:"user17", 
       world:"8867", 
      },{ 
       name:"user18", 
       world:"8868", 
      } 
    ]; 
    this.ulist = this.users.map((user, i) => { 
     var cName = i<5 ? "active":"nonActive"; 
     return <div key = {i} className = {cName}><h4>{user.name}</h4><p>{user.world}</p></div>; 
    }); 
    this.state = { 
     lastUser:4, 
     firstUser:0, 
     errorUp:"", 
     errorDown: "", 
    }; 
} 
moveUp(){ 
     this.state.errorUp = "red"; 
     setTimeout(() =>{ 
      this.state.errorUp = ""; 
     },4000); 
} 
render(){ 
    return(
     <div> 
     <i className={"fa fa-caret-up arrow "+ this.state.errorUp} aria-hidden="true" onClick = {this.moveUp.bind(this)}></i> 
     <i className={"fa fa-caret-down arrow "+ this.state.errorDown} aria-hidden="true"></i> 
     {this.ulist} 
     </div> 
    ); 
} 
} 
ReactDom.render(<Layout/>,app); 

なぜこれがhappening.And可能性は、それはあなたの時間のためにあなたをupdate.Thankうように、コンポーネントにクラスを追加するための他の方法があります。

Answer 1

this.state.something = "value" の代わりに this.setState({property:value})メソッドを使用して新しい状態を設定する必要があります。 設定状態が非同期操作であり、そのためにsetStateメソッドが作成されたため、this.state.errorUp = "red"は機能しません。