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