React.js의 각 항목에 대한 카운터

Question

배열의 각 요소에 카운터를 구현하고이를 화면에 표시하려고합니다. 배열이있어서 각 요소에 대해 자동차 이름, 좋아요, 증가 버튼 및 감소 버튼을 표시하려고합니다. 좋아하는 것을 늘리거나 줄이려고 할 때, 모든 요소가 똑같이 증가하고 감소합니다. 좋아하는 사람을 서로 독립적으로 유지하고 동일한 좋아하는 사람을 공유하지 않으려면 어떻게해야합니까? 예를 들어, 내가 1 대의 자동차를 좋아할 때, 나는 그 중 하나가 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 구성 요소의 경우이 시나리오에서는 실제로 필요하지 않으므로이 목록을 앱 중 어느 부분 에든 직접 포함시킬 수 있습니다. 귀하에게 달려 있습니다. 그러나 각 자동차에 대해 별도의 구성 요소를 갖는 것은 좋아하는 사람들을 위해 별도의 카운터를 사용하여 각자 별개의 주를 유지할 것을 보장합니다. 이전에는 모든 사람들이 공유 했으므로 코드가 예상대로 작동하지 않는 이유를 이해했는지 확인하십시오.