React js更改状态不会更新组件

React js changing state does not update component

本文关键字：更新 组件 状态 js React      更新时间：2023-09-26

我有一个按钮，当它被点击时，它应该将按钮颜色更改为红色，我通过更改状态来更新组件的类来实现它。红色类因此更新颜色，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);

为什么会发生这种事。还有没有其他方法可以将类添加到组件中以便更新。感谢您抽出时间；

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

即使使用useState，在更新状态变量时，我也遇到了组件不重新渲染的问题。对我来说，有效的方法是不在组件的return语句中调用.map（），而是在setState函数中调用.ma（）。

例如，给定：

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>
);
相关文章：