如何让我的按钮向表格添加元素

Question

我想添加一个按钮，每次单击它时都会将一个元素添加到总数中：

控制台显示：未捕获类型错误：无法在数字“2”上创建属性“id”

按钮：

 <div key={item.id} className="item">
                    <p  onClick={()=>add(item.id)}>+</p>
                    
                    <p>{item.product}</p>
                    <p>{item.price}</p>
                    <p className="delete" onClick={() => del(item.id)}>&times;</p>
                    
                </div>

删除按钮（x）正在工作

项目数组：

并在代码中：

import './App.css';
import React, {Component} from 'react';
import Items from './components/item/items'
import AddItem from './components/addItem/addItem'
import Total from './components/total/total'

class App extends Component {
  state = {
    items: [
      {id:1, product:'Pen', price:2},
      {id:2, product:'Book', price:10}
    ]
  }

  deleteItem = (id) => {
    let items = this.state.items
    let i = items.findIndex(item => item.id === id)
    items.splice(i, 1)
    this.setState({items: items})
  }

  addItem = (item) => {
    this.state.items.length > 0 ? (
      item.id = this.state.items[this.state.items.length - 1].id + 1 
    ) : item.id = 1
    console.log(item.id)
    let items = this.state.items
    items.push(item)
    this.setState({items: items})
  }

  render() {
    return (
      <div className="container">
        <h1>Product List React App</h1>
        <div className="table">
          <Items items={this.state.items} del={this.deleteItem} add={this.addItem}/>
          <AddItem add={this.addItem}/>
          <Total items={this.state.items}/>
          
        </div>
      </div>
    )
  }
}

export default App;

Answer 1

你可以这样做

const updatedItems = this.state.items.filter((_,idx)=> idx!= item)) this.setState({items: updatedItems})