如何用一个react中的一个按钮重置多个计数器

Question

我问题的TLDR是我的每个孩子组件都保留并显示自己的计数器点击。这些点击中的每一个还更新显示的Total。我想知道如何让Reset按钮也重置那些孩子组件。

我有一个应用程序，该应用显示总计，每个按钮以不同的方式和重置按钮递增总计。在这个小型应用中，重量是一个装满不同重量对象的数组

class CountersContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      total: 0,
    }
    this.resetTotal = this.resetTotal.bind(this)
    this.updateTotalByWeights = this.updateTotalByWeights.bind(this)
  }
  resetTotal = () => {
    this.setState({
      total: 0,
    })
  }
  updateTotalByWeights = value => {
    this.setState({ 
        total: this.state.total + value * 2,
      })
  }
  render() {
    return (
      <>
        <div className="container">
          {weights.map(w => (
            <Weight
              key={w.kg}
              incrementTotal={this.updateTotalByWeights}
              weight={w.kg}
            />
          ))}
        </div>
        <button className="click-target" onClick={this.resetTotal}>
          reset
        </button>
        <WeightOutput total={this.state.total} units={this.state.metric} />
      </>
    )
  }
/=============
// The weight component
/=============
import React from "react"
const Weight = ({ incrementTotal, weight }) => {
    return (
        <div onClick={() => { incrementTotal(weight) }} >
          {weight}
        </div>
    )
}
export default Weight

这很好。我希望每个Weight组件都可以保留单击其单击的次数。因此，如果单击两次5kg权重组件，则将显示2个计数，并以所需的方式更新总数。因此，我将以下内容添加到我的体重组件中：

import React, { useState } from "react"
const Weight = ({ incrementTotal, weight }) => {
    const [count, setCount] = useState(0)
    return (
        <div
            onClick={
                () => { 
                        incrementTotal(weight) 
                        setCount(count + 1)
                    }
                }
         >  
                {count > 0 && <span>{count}</span>}
                {weight}
        </div>
    )
}
export default Weight

这实现了正确递增总数的所需结果，并且每次点击都会更新组件计数。

但是，现在我需要更改重置按钮以重置每个重量组件count，我完全不知所措。我考虑过的一些事情迫使每个重量重新渲染，使"计数"进一步延续了层次结构。也许"挂钩"是错误的实现(这个小应用程序是试图使钩子很舒服的尝试(。理想的答案将包括如何以及潜在的解决方案一起解决问题。

注意：我不确定上述代码是否完美，我试图剥离与问题无关的零件。下面我添加了体重数据的外观，以防万一任何人都好奇。

export const weights = [
         {
           color: "red",
           kg: 25,
           lbs: 55,
         },
         {
           color: "blue",
           kg: 20,
           lbs: 45,
         },
// this goes on a while.

update

我已经更新了我的重量组件，看起来像这样：

import React, { useState, useEffect } from "react"
const Weight = props => {
    const [count, setCount] = useState(0)
    useEffect(() => {
      setCount(0)
    }, [props.reset])
    return (
      <div
        onClick={() => {
          props.incrementTotal(props.weight)
          setCount(count + 1)
        }}
      >
        {count > 0 && <span>{count}</span>}
        {props.weight}
      </div>
    )
}
export default Weight

并将reset: 0添加到我的重置SetState函数中。这还没有解决我的问题，但根据React Hook Docs的表现确实有希望的方向。

更新2 我接受了下面的答案，因为这是正确的，尽管我没有完全理解它。为了实现以下解决方案，我必须更新"重置"值。我通过通过。

我不确定这是良好解决方案。我相信它正在重新渲染所有重量组件。这可能是不好的，特别是如果有1000个组件很复杂。

this.setState({
   reset: !this.state.reset
})

Answer 1

您可以在要重置计数器并使用具有依赖性的useEffect钩子时，可以将其从父级到Weight子组件进行不同的道具传递。例如

class Parent extends React.Component {
  state = { reset: Date.now() };
  
  resetCounters = () => {
      this.setState({ reset: Date.now() });
  }
  render () {
    <div>
      <button onClick={this.resetCounters} >Reset</button>
      <Wieght reset={this.state.reset} {..some other props} />
      <Wieght reset={this.state.reset} {..some other props} />
      <Wieght reset={this.state.reset} {..some other props} />
      <Wieght reset={this.state.reset} {..some other props} />
    </div>
  }
}
const Weight = props => {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    setCounter(0);
  }, [props.reset]);
}

另一个选项是将reset作为权重组件的钥匙传递，因此，在更改密钥时，它将重新安装。这是一个简单的解决方案，但可能会引起大量重量组件的性能问题