React js 更改 state 不会更新组件

Question

我有一个按钮，当它被单击时，它应该将按钮颜色更改为红色，我通过更改 state 来更新组件的 class 以使其成为红色 class 以使其恢复正常。不会更新和重新渲染组件。 我的代码：

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

为什么会发生这种情况。还有其他方法可以将 class 添加到组件中，以便更新。谢谢您的时间；

Answer 1

你需要使用this.setState({property:value})方法而不是this.state.something =“value”来设置新状态。 this.state.errorUp =“red”将不起作用，因为设置状态是异步操作，并且为此目的创建了setState方法。

Answer 2

即使使用 useState，当 state 变量更新时，我也遇到了组件未重新渲染的问题。 对我有用的是不在组件的返回语句中调用.map()，而是在 setState function 中调用.map()。

例如，给定：

const { imgNums } = props;   // [123, 456, 789]
const [ myImages, setMyImages ] = useState( [] );

...这不起作用：

setMyImages( imgNums.slice() );

return(
    <div>                                 
        {myImages.map((number, index) =>     
                         ( <img key={`${number}${index}`}            
                                src={`/images/${number}.jpeg`}       
                                alt='some description' /> ) ))
        }                                      
    </div>
);

...但这确实：

setMyImages( imgNums.map((number, index) =>
    ( <img key={`${number}${index}`}
           src={`/images/${number}.jpeg`}
           alt='some description' /> ) ));

return(
    <div>                                 
        {myImages}                                      
    </div>
);