警告：遇到两个具有相同键的子项，`[object Object]1`

Question

addItem 函数不起作用，它给出了错误：

警告：遇到两个孩子使用同一把钥匙，

[object Object]1

。键应该是唯一的，以便组件保持其状态 跨更新的身份。非唯一的键可能会导致孩子 重复和/或省略 - 该行为不受支持并且可能 未来版本会更改。

addItem() 位于 app.js 中

App.js：

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 = () => {
  const { items } = this.state;
  const id = items.length ? items[items.length - 1] + 1 : 1;
  this.setState({ items: [...items, { id }] });
};
  
addItem2 = (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.addItem2}/>
          <Total items={this.state.items}/>
          
        </div>
      </div>
    )
  }
}

export default App;

items.js：

import React from 'react';

const Items = (props) => {
    const {items, del,add} = props;
    let length = items.length
    const ListItem = length ? (
        items.map(item => {
            return(
                <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>
            )
        })
    ) : (
        <div className="text">There are no items, Try to add some.</div>
    )
    return (
        <div>
            <div className="header item">
                <p>quantity</p>
                
                <p>Product</p>
                <p>Price</p>
                
                <p>Edit</p>
                
            </div>
           
            {ListItem}
        </div>
    )
}

export default Items

total.js：

import React from 'react';

const Total = (props) => {
    const {items} = props;
    let total = 0
    for (let i = 0; i < items.length; i++) {
        total += parseFloat(items[i].price)
    }
    return (
        <div>
            <p className="text">Total Price: {total}</p>
        </div>
    )
}

export default Total

Answer 1

您的 addItem 函数中有一个错误。您正在访问整个对象而不是它的 id 属性。

const items = [
  {id:1, product:'Pen', price:2},
  {id:2, product:'Book', price:10}
];

// your id
const id = items.length ? items[items.length - 1] + 1 : 1;
console.log(id);
// should be 
const id2 = items.length ? items[items.length - 1].id + 1 : 1;
console.log(id2);