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>

React.js递增和递减计数器未正确映射

1 个答案: