React.js中每個項目的計數器

Question

我正在嘗試爲數組中的每個元素實現一個計數器並將它們顯示在屏幕上。我有一個數組，我想爲每個元素顯示以下內容：汽車名稱，喜歡，增加按鈕和減少按鈕。當我試圖增加和減少喜歡時，所有的元素都會以同樣的方式增加和減少。我如何讓喜歡獨立於彼此而不共享喜歡？例如，當我喜歡一輛汽車時，我只希望那輛汽車增加likes的數量。有人可以幫助我解決這個問題嗎？這是我現在的代碼：

import React, {Component} from 'react'; 

class Cars extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     likes: 0 
    }; 

    this.incFav = this.incFav.bind(this); 
    this.decFav = this.decFav.bind(this); 
    } 

    incFav(e) { 
    this.setState({likes: this.state.likes + 1}); 
    } 

    decFav(e) { 
    this.setState({likes: this.state.likes - 1}); 
    } 

    render() { 
    //Passed this.props.cars from another component. It is an array of cars. 
    const { cars } = this.props; 
    return (
     <div> 
      {cars.map((car, key) => { 
       <li key={car}> 
        {car} 
        {this.state.likes} 
        <button onClick={this.incFav}>+</button> 
        <button onClick={this.decFav}>-</button> 
       </li> 
      })} 
     </div> 
    ); 
    } 
} 

export default Cars; 

Answer 1

好的，答案很簡單。你在混淆你的汽車名單的狀態與每輛車的狀態。在這種情況下，組件Cars有一個狀態，但不是每個特定的汽車。我的建議是創建一個名爲Car的附加組件，它有自己的likes。您的代碼會是這個樣子：

import React from 'react'; 
import Car from '../Car/Car.js'; 

const Cars = ({ cars }) => (
    <ul>{cars.map((car, key) => <Car car={car} key={car} />}</ul> 
); 

export default Cars; 

正如你看到的汽車名單並不需要有大約每單臺車的狀態的任何信息，這東西你會處理這樣每個汽車部件內部：

import React, {Component} from 'react'; 

class Car extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { likes: 0 }; 
    this.incFav = this.incFav.bind(this); 
    this.decFav = this.decFav.bind(this); 
    } 

    incFav() { 
    this.setState(prevState => ({ likes: prevState.likes + 1 })); 
    } 

    decFav() { 
    this.setState(prevState => ({ likes: prevState.likes - 1 })); 
    } 

    render() { 
    return(
     <li> 
     {this.props.car} 
     {this.state.likes} 
     <button onClick={this.incFav}>+</button> 
     <button onClick={this.decFav}>-</button> 
     </li> 
    ); 
    } 
} 

export default Car; 

正如你可能會注意到的那樣，在這種情況下真的不需要Cars組件，所以你可以直接在你的應用程序的任何部分嵌入這個列表，這取決於你。但是爲每輛車配備獨立的部件將保證您將擁有一個單獨的狀態，並有一個獨立的愛好專櫃。以前它是所有人共享的，請確保你明白爲什麼你的代碼沒有按預期行事。