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组件，因此您可以直接将此列表嵌入到应用程序的任何部分，这取决于您。但是为每辆车配备一个单独的部件将保证他们每个都有一个单独的状态，并有一个单独的计数器。以前它是在所有这些之间共享的，请确保您理解为什么您的代码没有按预期运行。

React.js中每个项目的计数器

1 个答案: