reactjs - 如何在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

这实现了总数正确增加并且每次点击更新组件计数的预期结果。

但是，现在我需要更改重置按钮来重置每个重量组件计数，而我完全不知道如何解决这个问题。我考虑过的一些事情是强制每个权重重新渲染，从而使“计数”在层次结构中保持更高的位置。也许“钩子(Hook)”在这里是错误的实现(这个小应用程序主要是为了适应钩子(Hook))。理想的答案将包括如何解决问题以及潜在的解决方案。

注释:我不确定上面的代码是否完美，我尝试删除与问题无关的部分。下面我添加了体重数据，以防有人好奇。

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

更新

我已经更新了我的重量组件，如下所示:

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 文档，这似乎是一个有前途的方向。

更新 2 我接受了下面的答案，因为它是正确的，尽管我未能完全理解它。为了实现以下解决方案，我必须更新“重置”值。我是通过路过做到这一点的。

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

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

Answer 1

每当您想要重置计数器时，您都可以将具有不同值的 prop 从父组件传递给 Weight 子组件，并使用带有依赖项的 useEffect 钩子(Hook)作为该 prop。例如

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 作为键传递给 Weight 组件，这样，在更改键时，它将重新安装。这是一个简单的解决方案，但可能会导致大量权重组件出现性能问题