映射时递增或递减react数组中的值

import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            values: [1, 2, 3, 4, 5] // 初始化一个包含数值的数组
        };
    }

    render() {
        // 使用数组的map方法遍历并渲染数组中的每个元素
        const updatedValues = this.state.values.map((value) => (
            <div key={value}>
                <span>{value}</span>
                <button onClick={() => this.incrementValue(value)}>+</button>
                <button onClick={() => this.decrementValue(value)}>-</button>
            </div>
        ));

        return (
            <div>
                {updatedValues}
            </div>
        );
    }

    incrementValue(value) {
        // 创建新的数组并递增特定位置的值
        const updatedValues = this.state.values.map((v) => {
            if (v === value) {
                return v + 1;
            }
            return v;
        });

        // 更新状态以重新渲染组件
        this.setState({ values: updatedValues });
    }

    decrementValue(value) {
        // 创建新的数组并递减特定位置的值
        const updatedValues = this.state.values.map((v) => {
            if (v === value) {
                return v - 1;
            }
            return v;
        });

        // 更新状态以重新渲染组件
        this.setState({ values: updatedValues });
    }
}

export default MyComponent;