React js wechselnden Zustand aktualisiert nicht Komponente

Question

Ich habe eine Schaltfläche, die, wenn es angeklickt wird, sollte die Schaltfläche Farbe zu rot ändern, mache ich das durch Ändern des Status zu aktualisieren Klasse der Komponente, um es zu machen .red-Klasse so Aktualisierung der Farbe und danach 4s würde es wieder normal werden. Allerdings wird die Komponente nicht aktualisiert und neu gerendert. Mein Code:

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

Warum dieser happening.And sein könnte, ist es eine andere Möglichkeit Klasse, um die Komponente hinzuzufügen, so dass es Sie für Ihre Zeit update.Thank würde;

Answer 1

müssen Sie this.setState({property:value}) Methode statt this.state.something = "Wert" verwenden, um den neuen Status festzulegen. this.state.errorUp = "rot" funktioniert nicht, da der Einstellungsstatus eine asynchrone Operation ist und die setState-Methode zu diesem Zweck erstellt wurde.