React.js Inkrementieren und Dekrementieren des Zählers, der nicht richtig zugeordnet ist

Question

Lassen Sie mich vortragen, dass ich gerade dabei bin, React zu lernen, und ich bin immer noch ziemlich grün dabei.

Ich werde die notwendigen Teile des Codes geben:

ich einen Zähler mit Erhöhungs- und Verringerungs Tasten aufgebaut haben, die von Weisen Zustand verwendet werden, sie arbeiten nur gut, bis ich einführen und Array und Karte darüber. Dann beginnen die Dinge zusammenzubrechen. Ich weiß, dass mein Code falsch ist. Ich weiß, dass etwas nicht stimmt, aber ich weiß nicht, worauf ich überhaupt achten soll.

In meinem counting.js ich habe:

const players = [ 
    { 
    name: "Jon Smith", 
    score: 10, 
    id: 1, 
    }, 
    { 
    name: "Jon Doe", 
    score: 40, 
    id: 2, 
    }, 
    { 
    name: "John Ham", 
    score: 30, 
    id: 3, 
    }, 
]; 

Was ich hier abgebildet haben:

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> 
    ) 
} 

} 

ich importiert haben meine Counter.js, die zusammengesetzt ist aus:

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> 


    ) 
    } 
} 

So ist die Inkrementieren und Dekrementieren Schaltflächen funktionieren nur global und nur für meine statische <li>, nicht meine aus dem Array generiert. Wenn ich überhaupt einen Sinn habe, wie ordne ich individuell meine Inc/Dec-Tasten zu jedem <li> und nicht global?

Vielen Dank!

Answer 1

Sie müssen den Zustand zu halten, auch eine Reihe von Objekten, die jeweils die Speicherung von Daten für einen entsprechenden Benutzer

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>