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>