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

【问题标题】：I'm wanting to duplicate but maintain state separately for each component. Do I need to create each function for each component separately instead?我想为每个组件复制但分别维护状态。我是否需要分别为每个组件创建每个函数？
【发布时间】：2019-02-09 19:49:29
【问题描述】：

我想为每个组件分别复制但维护状态。我是否需要分别为每个组件创建每个函数？现在，如果您查看代码，只有一个 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>
    )
  }
}

【问题讨论】：

标签： javascript reactjs react-component

【解决方案1】：

播放器组件应该管理自己的状态。没有办法区分它们之间的分数，因为它们都被传递了相同的值this.state.score，除非你从状态中传递不同的值，这意味着状态内的每个玩家都有不同的键并相应地处理它们。

附带说明，当您需要在 setState 中引用当前状态时（就像您在 updateScoreFive 函数中所做的那样），最好将其传递给函数而不是对象，以避免由于 setState 的异步性质而导致的问题：

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

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

【讨论】：

【解决方案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: {} })
}

【讨论】：