React 类：setState 啥都不做（并且没有报告错误）[重复]

Posted 2023-02-21

【中文标题】React 类：setState 啥都不做（并且没有报告错误）[重复]

【英文标题】：React class: setState does nothing (and no errors reported) [duplicate]React 类：setState 什么都不做（并且没有报告错误）[重复]

【发布时间】：2018-03-03 14:19:30

【问题描述】：

我有一个带有这个构造函数的 React 类：

class AddList extends Component 
constructor(props)
  super(props);
  this.state =  hidden: true ;

那我就有这个功能了：

handleSubmit(e) 
e.preventDefault(); // this prevents the page from reloading -- do not     delete this line!

// Implement the rest of this function here!
alert('this.state.hidden: ' + this.state.hidden);
if (this.state.hidden == true)
  alert('setting hidden to false');
  this.setState(hidden: false);
  
  else
    alert('setting hidden to true');
    this.setState(hidden: true);
  
alert('this.state.hidden: ' + this.state.hidden);
    . . . 

My problem is that neither this.setState(hidden: false);
nor                        this.setState(hidden: 'false'); 

改变状态！ 'alert' 框通过代码确认路径，只有 'setState' 似乎是 NOP！

【问题讨论】：

“只有 'setState' 似乎是 NOP！”。什么意思？

我们能看到你想要做什么的完整文件吗？这些 sn-ps 不清楚。

如果某些东西不工作，背后会有一个正当的理由，在这种情况下，原因是：“setState 行为是异步的”:)

【参考方案1】：

setState 是异步的，因此之后您将无法看到更新。这就是为什么您在上一次alert 通话中看不到最新值的原因。

更多信息请查看 ReactJs 的文档： https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly

我根据你的写了一个示例代码：

class AddList extends React.Component 
  constructor(props) 
    super(props)
    
    this.state =  hidden: true 
    
    this.handleSubmit = this.handleSubmit.bind(this)
  
  
  handleSubmit(event) 
    event.preventDefault()
    
    this.setState( hidden: !this.state.hidden )
  
  
  render() 
    return (
      <div>
        <div>State value: this.state.hidden ? 'hidden' : 'visible'</div>
        <button onClick=this.handleSubmit>Click-me</button>
      </div>
    )
  
 
 
 ReactDOM.render(<AddList />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

【讨论】：

*修正setState是异步的

【参考方案2】：

如果你想在更新后读取状态值，你可以使用 setState 方法的第二个参数，它是一个回调函数。此回调函数在状态更新并重新渲染组件后执行。例如。 this.setState( hidden: !this.state.hidden , function() console.log("updated state: " + this.state.hidden); );