Question

我想在点击时增加一个项目的计数器值，我试图在文档中找到解决方案，我看过教程，但我找不到解决方案。

水果计数器.js

import { Fragment, useState } from "react"
import Fruit from "./Fruit"

const data = [
    { id: 1, name: "?", counter: 0 },
    { id: 2, name: "?", counter: 0 },
]

const FruitCounter = () => {
    const [fruits, setFruits] = useState(data)

    const clickHandler = (fruit) => {
       // Increment 'counter value of clicked item by 1'
    }

    return (
        <Fragment>
            {fruits.map((fruit) => {
                return (
                    <Fruit
                        key={fruit.id}
                        {...fruit}
                        clickHandler={() => clickHandler(fruit)}
                    />
                )
            })}
        </Fragment>
    )
}

export default FruitCounter

水果.js

import React from "react"

const Fruit = ({ counter, name, clickHandler }) => {
    return (
        <button type="button" className="fruit" onClick={clickHandler}>
            <p>{counter}</p>
            <h2>{name}</h2>
        </button>
    )
}

export default Fruit

Answer 1

你可以试试这个

{{1}}

更新数组中对象的值 - 反应钩子

1 个答案: