React.js增量和減量計數器未正確映射

Question

讓我以為我正在學習React的過程中，對此我還是很環保的。

我將提供代碼的必要部分：

我建立了一個帶有遞增和遞減按鈕的計數器，這些按鈕可以通過狀態使用，在我引入並對其進行數組和映射之前，它們工作得很好。 然后事情開始崩潰。 我知道我的代碼是錯誤的，我知道有什么不對勁，但是我對尋找的東西一無所知。

在我的counting.js我有：

    const players = [
  {
    name: "Jon Smith",
    score: 10,
    id: 1,
  },
  {
    name: "Jon Doe",
    score: 40,
    id: 2,
  },
  {
    name: "John Ham",
    score: 30,
    id: 3,
  },
];

我在這里映射的：

    class Counting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
                  count: 0,
                  nameof: 'Full Name',
                  }

    this.incrementCount = this.incrementCount.bind(this)
    this.decrementCount = this.decrementCount.bind(this)
  }


  incrementCount(e) {
    this.setState({
      count: (this.state.count + 1),
    })
  }

  decrementCount(e) {
    this.setState({
      count: (this.state.count - 1),
    })
  }



  render() {
    const listPlayers = players.map((players) =>
      <Counter
        key={players.id}
        incrementCount={this.incrementCount}
        decrementCount={this.decrementCount}
        nameof={players.name}
        count={players.score}
      />
    );

    return (
     <div className="wrap">

  <Titles header="Counter" subhead="A setState() project" subtitle="this will change" />
    <h3>This doesn't work correctly</h3>
   <ul>{listPlayers}</ul>
  <ScoreList>
    <h3> works</h3>
    <li>
      <Counter
        incrementCount={this.incrementCount}
        decrementCount={this.decrementCount}
        nameof={this.state.nameof}
        count={this.state.count}
      />
    </li>
    <li>
      <Counter
        incrementCount={this.incrementCount}
        decrementCount={this.decrementCount}
        nameof={this.state.nameof}
        count={this.state.count}
      />
    </li>
  </ScoreList>
     </div>
   )
 }

}

我已經導入了我的Counter.js ，其中包括：

    class Counter extends Component {
  render() {
    const { count } = this.props
    const { decrementCount } = this.props
    const { incrementCount } = this.props
    const { nameof } = this.props

    return (
      <div>
        <CountCell>
          <Row style={{alignItems: 'center'}}>
                <Col>
                  <CountButton
                    onClick={incrementCount}>
                    <Icon
                      name="icon" className="fa fa-plus score-icon"
                    />
                  </CountButton>
                </Col>
                <Col >
                  <ScoreName>{nameof}</ScoreName>
                </Col>
                <Col >
                  <Score>{count}</Score>
                </Col>
                <Col>
                  <CountButton
                    onClick={decrementCount}>
                    <Icon
                      name="icon" className="fa fa-minus score-icon"
                    />
                  </CountButton>
                </Col>
              </Row>

        </CountCell>
      </div>


    )
  }
}

因此，遞增和遞減按鈕僅在全局范圍內起作用，並且僅適用於我的靜態<li> ，不適用於從數組生成的按鈕。 如果我有任何意義，如何將inc / dec按鈕分別映射到每個<li>而不是全局映射？

謝謝！

Answer 1

您還需要保持狀態為對象數組，每個對象存儲一個對應用戶的數據

class Counting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
                  countInfo: []

                  }

    this.incrementCount = this.incrementCount.bind(this)
    this.decrementCount = this.decrementCount.bind(this)
  }


  incrementCount(index) {
    var countInfo = [...this.state.countInfo];
    if(countInfo[index]) {
        countInfo[index].count = countInfo[index].count + 1
        countInfo[index].nameOf = players[index].name
    }
    else {
       countInfo[index] = {count: 1, nameOf: players[index].name}
    }
    this.setState({
      countInfo
    })
  }

  decrementCount(index) {
    var countInfo = [...this.state.countInfo];
    if(countInfo[index]) {
        countInfo[index].count = countInfo[index].count - 1
        countInfo[index].nameOf = players[index].name
    }
    else {
       countInfo[index] = {count: -1, nameOf: players[index].name}
    }
    this.setState({
      countInfo
    })
  }



  render() {
    const listPlayers = players.map((players, index) =>
      <Counter
        key={players.id}
        incrementCount={() => this.incrementCount(index)}
        decrementCount={() => this.decrementCount(index)}
        nameof={players.name}
        count={players.score}
      />
    );

    return (
     <div className="wrap">

  <Titles header="Counter" subhead="A setState() project" subtitle="this will change" />
    <h3>This doesn't work correctly</h3>
   <ul>{listPlayers}</ul>