反应：在从另一个组件调用的函数中使用 setState？

Question

我从 ReactJS 开始，我正在用 React 为我的游戏做一个评分系统。

我使用了一个名为 Score 的组件来管理它。

我在可以增加increment()的状态下做了分值。

问题是我想在我的 App 组件中使用这个函数（这是一个例子，我创建了 incrementScore() 来展示它）。

然而，当从另一个组件调用该函数时，我的 increment() 无法访问 this.setState()。

请注意，我在 Score.js 中创建了一个按钮 "Increment"，它使用 increment()，并且效果很好。

您有解决方案还是可以提供一些线索？谢谢！

App.js:

import Score from './Score'

class App extends React.Component {

  incrementScore() {
    Score.prototype.increment()
  }

  render() {
    return (
        <div>
          <h1 id="title">Game</h1>
          <Score />
          <Canvas /> {/*Not important here, just for the game*/}
        </div>
    )
  }
}

export default App

Score.js:

import React from 'react'

class Score extends React.Component {

  constructor() {
    super()
    this.state = {
      score: 0
    }
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState({
      score: this.state.score + 1 //this.state.score + 1
    })
  }

  render() {
    return (
      <div>
        <p id="score">Score: {this.state.score}</p>
        <button>Incrementer</button>
      </div>
    )
  }
}

export default

Answer 1

如 Robin 所述，只需将您的状态移动到您的父 App 组件，并让您的 Score 组件成为 'stateless' 组件。另外，确保将增量函数作为道具向下传递，并在按钮中将其用作 onClick 函数。

class App extends React.Component {
constructor() {
    super()
    this.state = {
      score: 0
    }
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState({
      score: this.state.score + 1 //this.state.score + 1
    })
  }

  render() {
    return (
      <div>
        <h1 id="title">Game</h1>
        <Score scoreCount={this.state.score} increment={this.increment}/>
      </div>
    )
  }
}
const Score = props =>
      <div>
        <p id="score">Score: {props.scoreCount}</p>
        <button onClick={props.increment}>Incrementer</button>
      </div>

查看现场示例：https://codesandbox.io/s/wq4kqqz0mw

反应：在从另一个组件调用的函数中使用 setState？

REACT: Use setState in a function called from another component?

javascript

function

setstate

reactjs