时间戳

首页 > 解决方案 > React 简单状态管理

reactjs - React 简单状态管理

问题描述

我有一个状态很小的简单组件。我想要一个单击按钮以将该状态更改为其他状态。现在我看到一个意外的令牌错误，不太明白为什么。

下面是代码：

// Component to practice simple state mgmt
import React from 'react'

class Stateful extends React.Component{
  state = {
    flag: true,
    text: "I am simple text"
  }
  render() {
    return(
      <div>
        <h2>Small State example</h2>
        <p>{this.state.text}</p>
        <button onClick={
          this.setState(
            prevState=>({
              flag: !prevState.flag,
              text: prevState.text.toUpperCase()
            })
      }>Click to change state</button>
      </div>
    )
  }
}

export default Stateful

标签： reactjs

解决方案

您没有为单击事件分配处理程序。您直接调用setState这是不好的，因为您在render方法中并且状态更改会导致重新渲染，从而有效地创建无限循环。

您还缺少一个)

所以使用

<button onClick={()=>
      this.setState(
        prevState=>({
          flag: !prevState.flag,
          text: prevState.text.toUpperCase()
        }))
  }>Click to change state</button>

在https://codesandbox.io/s/j2x9jm38y5工作演示

推荐阅读