Question

我想复制但要分别维护每个组件的状态。我是否需要分别为每个组件创建每个函数？现在，如果您查看代码，则只有一个Player组件被多次使用，但是当前代码使用的是相同状态，因此，当使用onClick函数更新状态时，会更新所有Player组件。

import React from 'react'
import ReactDOM from 'react-dom'
import Player from './Player'

class App extends React.Component {
  state = {
    players: 2,
    score: 0,
  }
  resetBoard = () => {
    this.setState({ players: 2, score: 0 })
  }

  updateScoreFive = () => {
    return this.setState({ score: this.state.score + 5 })
  }

  render() {
    return (
      <div>
        <Player
          key={1}
          five={this.updateScoreFive}
          score={this.state.score}
          name={this.state.players <= 2 ? 'Team One' : 'Player One'}
        />
        <Player
          key={2}
          score={this.state.score}
          name={this.state.players <= 2 ? 'Team Two' : 'Player Two'}
        />

        <button onClick={this.resetBoard}>Reset Board</button>
      </div>
    )
  }
}

Answer 1

播放器组件应管理自己的状态。无法区分它们之间的分数，因为它们都被传递了相同的值this.state.score，除非您从州传递了不同的值，这意味着该状态下每个玩家具有不同的键并进行相应的处理。 / p>

另一方面，当需要在setState中引用当前状态时（如在updateScoreFive函数中所做的那样），最好将其传递给函数而不是对象，以避免setState的异步性质引起的问题：< / p>

this.setState( prevState => ({ score: prevState.score + 5 }))

这样，您可以确保始终在setState函数中获取更新后的值。

Answer 2

您可以将score设为一个对象，并针对该对象的不同键保存不同玩家的得分：

state = {
    players: 2,
    score: {},
}

现在修改您的updateScoreFive方法以采用玩家自变量，这样它就知道要更新哪个玩家的得分：

// it takes an argument `player` and returns a function
// in which it updates the score state against the key `player` 
updateScoreFive = (player) => () => {
  this.setState({
    score: {
      ...this.state.score,
      [player]: (this.state.score[player] || 0) + 5
    }
  })
}

现在渲染您的组件：

// save it's score in score[1]
<Player
  key={1}
  five={this.updateScoreFive(1)}
  score={this.state.score[1] || 0}
  name={this.state.players <= 2 ? 'Team One' : 'Player One'}
/>
// save it's score in score[2]
<Player
  key={2}
  five={this.updateScoreFive(2)}
  score={this.state.score[2] || 0}
  name={this.state.players <= 2 ? 'Team Two' : 'Player Two'}
/>

您的resetBoard也进行了更改：

resetBoard = () => {
    this.setState({ players: 2, score: {} })
}

我想复制但分别维护每个组件的状态。我是否需要分别为每个组件创建每个函数？

2 个答案: