React js değişen durum bileşeni güncellenmiyor

Question

Tıklandığında, düğme rengini kırmızı olarak değiştirmesi gereken bir düğmem var, bunu yapmak için durumu değiştirerek bunu yapmak için bileşenin sınıfını güncellemek. 4s, normale dönecektir. Bir şekilde bileşeni güncellemez ve yeniden oluşturmaz. Kodum:

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

Neden bu happening.And olabilir zaman için sizi update.Thank diye bileşene sınıf eklemek için başka bir yolu yoktur;

Answer 1

Eğer yeni bir devlet kurmak için yerine this.state.something = "değer" this.setState({property:value}) yöntemi kullanmak gerekir. this.state.errorUp = "kırmızı" işe yaramaz, çünkü ayar durumu zaman uyumsuz bir işlemdir ve bu amaçla setState yöntemi oluşturulmuştur.