Question

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

下面是代码：

// 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

Answer 1

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

您还缺少)

所以使用

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

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

Answer 2

您在onClick函数中缺少一个)，并且没有正确使用它。您需要使用一个函数并为() => ...

这样的onclick事件调用它

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

我也更喜欢将onClick处理程序提取到单独的函数中。因此，我们的渲染方法将通过这种方式变得更干净。

handleClick = () =>
    this.setState(
      prevState => ({
        flag: !prevState.flag,
        text: prevState.text.toUpperCase()
      }))

 render() {
    return (
      <div>
        <h2>Small State example</h2>
        <p>{this.state.text}</p>
        <button onClick={this.handleClick}>Click to change state</button>
      </div>
    )
  }

反应简单的状态管理

2 个答案: