反应.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>