React js thay đổi trạng thái không cập nhật thành phần

Question

Tôi có một nút mà khi nó được nhấp, nó sẽ đổi màu nút thành đỏ, tôi làm điều đó bằng cách thay đổi trạng thái để cập nhật lớp thành phần để làm cho nó. 4s nó sẽ trở lại bình thường. Bằng cách nào đó nó không cập nhật và tái render thành phần. Mã của tôi:

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); 

Tại sao điều này có thể là happening.And là có cách nào khác để thêm lớp để các thành phần như vậy nó sẽ update.Thank bạn đã dành thời gian;

Answer 1

bạn cần sử dụng phương thức this.setState({property:value}) thay vì this.state.something = "value" để đặt trạng thái mới. this.state.errorUp = "red" sẽ không hoạt động, bởi vì trạng thái cài đặt là một hoạt động không đồng bộ, và phương thức setState được tạo cho mục đích đó.