javascript - Reactjs无法打印id

Question

我是 ReactJS 新手。我正在尝试构建一种在线购物类型的功能，其中我们可以增加或减少数量。或者使用“删除”按钮直接删除项目。我正在尝试使用 console.log("delete clicked",counterId); 打印所单击的按钮的 id在“counters.jsx”中。但每次它都会给我带来一些不确定的情况。这是我的代码。

计数器.jsx

import React,{Component} from 'react';
import Counter from './counter';

class Counters extends Component {
    state = {
        counters:[
            {id:1,value:4},
            {id:2,value:0},
            {id:3,value:3},
            {id:4,value:0}
        ]
    };

    handleDelete=(counterId)=>{
        console.log("delete clicked",counterId);
    }

    render(){
        return (
            <div>
                {this.state.counters.map(counter=>
                    <Counter key={counter.id} onDelete={this.handleDelete} value={counter.value}/>)}
            </div>
        );
    }
}

export default Counters;

计数器.jsx

import React, { Component} from 'react';

class Counter extends Component{
    state={
        value: this.props.value 
    };

    handleIncrement=()=>{
        this.setState({value:this.state.value+1});
    }

    handleDecrement=()=>{       
        this.setState({value:this.state.value-1});
    }

    render(){
        return (
            <React.Fragment>
                <p>
                <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button onClick={this.handleIncrement} className="btn btn-secondary btn-sm m-1">Increment</button>
                <button onClick={this.handleDecrement} className="btn btn-warning btn-sm m-1">Decrement</button>
                <button onClick={()=>this.props.onDelete(this.props.id)} className="btn btn-danger btn-sm m-1">Delete</button>
                </p>
            </React.Fragment>
        );
    }

    getBadgeClasses(){
        let classes="badge m-2 badge-";
        classes+=this.state.value===0?"warning":"primary";
        return classes;
    }

    formatCount(){
        const {value} = this.state;
        return value===0 ? 'Zero': value;
    }
}

export default Counter;

任何帮助将不胜感激!

Answer 1

读一遍。 https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

在上面的示例中，Post 组件可以读取 props.id，但不能读取 props.key。

因此，你必须添加 props.id={counter.id}!

计数器.jsx 之前

render(){
    return (
        <div>
            {this.state.counters.map(counter=>
                <Counter key={counter.id} onDelete={this.handleDelete} value={counter.value}/>)}
        </div>
    );
}

之后

render(){
    return (
        <div>
            {this.state.counters.map((counter, index)=>
                <Counter key={index} id={counter.id} onDelete={this.handleDelete} value={counter.value}/>)}
        </div>
    );
}