如何从组件属性更改let的值？

Question

一旦时间等于0，我试图隐藏卡，但是timeLeft从未更新。知道我在这里做什么错了吗？

<div style={{ flexDirection: "column", overflowY: "scroll" }}>
  {sorted.map((d, i) => {
    let timeLeft;
      return (
        <div key={i} className="card__container">
          <ProgressBar
            percentage={d.time * 10}
            timing={res => (timeLeft = res)}
          />
        </div>
      );
  })}
</div>

我的ProgressBar看起来像这样

constructor(props) {
    super(props);
    this.state = {
      timeRemainingInSeconds: props.percentage
    };
  }
  componentDidMount() {
    timer = setInterval(() => {
      this.decrementTimeRemaining();
    }, 1000);
  }

  decrementTimeRemaining = () => {
    if (this.state.timeRemainingInSeconds > 0) {
      this.setState({
        timeRemainingInSeconds: this.state.timeRemainingInSeconds - 10
      });
    } else {
      clearInterval(timer);
      this.props.timing(0);
    }
  };
  render() {
    return (
      <div className="Progress_wrapper">
        <div
          className="Progress_filler"
          style={{ width: `${this.state.timeRemainingInSeconds / 2}%` }}
        />
      </div>
    );
  }
}

Answer 1

如果您可以引用用于ProgressBar的库，将会更容易。如果不是来自库，请参考它的源代码。

我在这里看到timing道具的一些问题。

<ProgressBar
  percentage={d.time * 10}
  timing={res => (timeLeft = res)}
/>

---

我对您为ProgressBar做道具的理解

计时

这应该是一个静态值，组件将其显示为可视指示器。我们必须注意该道具所需的单位。

百分比

这应该是一个介于0到100之间的值，该值将决定进度条的外观。

您的问题：在计时为零（或百分比为100时，隐藏组件）。

为此，我们可以部署策略来操纵包装此组件的div的样式。

<div style={{ flexDirection: "column", overflowY: "scroll" }}>
  {sorted.map((d, i) => {
    const percentage = d.time * 10; // this is taken from your own computation of percentage. I reckon that you need to divide by 100.
    let customStyle = {};
    if(percentage === 100){
      customStyle = {
        display: "none"
      }
    }

    return (
      <div key={i} className="card__container" style={customStyle}>
        <ProgressBar
          percentage={percentage}
          timing={res => (timeLeft = res)}
        />
      </div>
    );
  })}
</div>

Answer 2

我认为该变量不会更新，因为您的map函数是一种功能组件，因此是一个render函数。如果您更改父组件，则该变量基本上总是重置。

您可以通过将其外部化并使用一个useState钩子来创建一个真实的功能组件，如下所示（我真的不知道，但这也可以用作map函数中的定义）：

function CardContainer(props) {
    const [timeLeft, setTimeLeft] = useState(0); // @todo set initial state based on your own definition

      return (
        <div key={i} className="card__container">
          <ProgressBar
            percentage={d.time * 10}
            timing={res => setTimeLeft(res)}
          />
        </div>
      );
}