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.

更新

我已经更新了体重分量，看起来像这样：

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添加到我的reset setState函数中。这并不能解决我的问题，但是根据React Hook Docs的确是一个有前途的方向。

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

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

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

Answer 1

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

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组件，因此，在更改密钥时，它将重新安装。这是一个简单的解决方案，但可能会导致大量的Weight组件出现性能问题

如何在React中使用一个按钮重置多个计数器

1 个答案: