javascript - 如何从组件 Prop 更改 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>

我的进度条是这样的

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

我认为该变量没有得到更新，因为您的 map 函数是一种功能组件，因此它是一个渲染函数。如果您对父组件进行更改，该变量基本上总是会重置。

您可以通过将其外部化并使用 useState Hook 来创建一个真正的功能组件，类似于以下内容(我真的不知道，但这也可以作为您的 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>
      );
}