IT技术 - React.js 中每个项目的计数器 - 吾爱随笔录

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

IT技术 javascript reactjs

2021-05-11 04:06:16

我正在尝试为数组中的每个元素实现一个计数器并将它们显示在屏幕上。我有一个数组，我想为每个元素显示以下内容：汽车名称、喜欢、增加按钮和减少按钮。当我尝试增加和减少喜欢时，所有元素都以相同的方式增加和减少。我如何保持喜欢彼此独立并且不共享相同的喜欢？例如，当我喜欢一辆汽车时，我只想要那一辆来增加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;

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;

正如您所注意到的，Cars 列表不需要关于每辆车的状态的任何信息，这是您在每个 Car 组件中处理的事情，如下所示：

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

其它你可能感兴趣的问题

上一篇数据爆发，redux 缓冲/react重新渲染下一篇如何在带有 Field 和 FieldArray 的 React 组件中使用由 @types/redux-form 定义的类型？