javascript - 不会删除 react 中的正确项目

Question

我的状态购物车值 (shirtsList) 是一个包含 T 恤对象数组的单独文件。我想要做的是通过单击 itemOptions.js 组件文件中的删除按钮从数组中删除一个项目。我的删除处理程序是 handleRemoveItem，如您在 App.js 文件中所见。

App.js 文件:

import React, { Component } from 'react';
import Item from './Components/item';
import ItemProperties from './Components/itemProperties';
import { shirtsList } from './shirtsList';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      quantity: [],
      totalItems: 0,
      size: ['S', 'M', 'L'],
      color: ['red', 'blue', 'black'],
      cart: shirtsList
    }
  }

  handleRemoveItem = (shirt) => {
    console.log(shirt)
    let index = this.state.cart.filter((item) => {
      return shirt !== item
    })
    this.setState({cart: index})
  }


  render() {
    this.setState.quantity = shirtsList.map((shirt, i) => {
      return ( 
        this.state.quantity.push({amount: shirtsList[i].quantity})
      ) 
    })

    return (
      <div>
        <div className="itemInTheCart">

        {
          this.state.cart.map((shirt, i) => {
          return ( 
            <Item 
              onClick={(e) => this.handleRemoveItem(shirt)}
            />
            ) 
          })
        }
        </div>
      </div>
    );
  }
}

export default App;

item.js 组件文件:

import React from 'react';
import ItemOptions from './itemOptions';

const item = (props) => {
    return (
        <div className="item">
            <ItemOptions onClick={props.onClick}/>
        </div>
    );
}

export default item;

itemOptions.js 组件文件:

import React from 'react';

const itemOptions = (props) => {
    return (
        <div className="itemOptions">
            <p className="itemOptions__remove" onClick={props.onClick}>X REMOVE |&nbsp;</p>
        </div>
    );
}

export default itemOptions;

Answer 1

你在 App.js 中犯了很多错误

1. 切勿在渲染中执行 setState。
2. 您执行 setState 的方式不正确
3. 切勿直接改变状态。您必须使用 setState 来修改状态值
4. 尝试通过使用 React 提供的生命周期方法来保持渲染尽可能干净。
5. 不推荐将项目推送到数组的方式，因为你是直接变异

在 React 中使用 setState 插入数组的正确方法如下所示

  render() {
       shirtsList.map((shirt, i) => {
            let obj = {};
            obj.amount = shirt.quantity;
            this.setState(prevState => ({
                 quantity: [...prevState.quantity, obj]
            }));
        })
   }