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>