javascript - React js 改变状态不更新组件

Question

我有一个按钮，当它被点击时，它应该将按钮颜色更改为红色，我这样做是通过更改状态来更新组件类使其成为 .red 类，从而更新颜色，4 秒后它将恢复正常。然而不知何故它不会更新和重新渲染组件。 我的代码:

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

为什么会发生这种情况。是否有任何其他方法可以将类添加到组件以便更新。谢谢您的宝贵时间；

Answer 1

你需要使用 this.setState({property:value})方法代替 this.state.something = "value" 设置新状态。 this.state.errorUp = "red"将不起作用，因为设置状态是一个异步操作，而 setState 方法就是为此目的而创建的。