React js改变状态不更新组件

我有一个按钮，当它被点击它应该改变按钮的颜色为红色，我通过改变状态来更新组件的类来使它.red类更新颜色和之后4s它会恢复正常。但不知何故，它不会更新并重新渲染组件。我的代码：React js改变状态不更新组件

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

这是为什么可能是happening.And是有任何其他方式增加类的组件，以便将update.Thank您的时间;

来源

2016-05-16 August

使用'this.setState'，不要改变'this.state'。另外，你应该在你的'render'函数中执行'users.map（）'。 – Aaron

我只是分享一个想法：当我改变一个属性时，我使用'this.setState（{errorUp：“red”}）''。可能是这个吗？ – Pierfrancesco

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

来源

2016-05-16 17:10:10 nuway

是的，它的作品谢谢你。 – August

React js改变状态不更新组件

回答

相关问题