React - 如何使用 useState 动态更新值

Question

当前用户界面：

有两种方法可以更新currentPercentage的值。

1.滚动
2.点击按钮更新百分比

对于 (1)，我使用react-scroll-percentage库来获取百分比。
对于 (2)，我创建了 2 个按钮来更新currentPercentage的值

我想动态设置currentPercentage的百分比，但我找不到处理它的方法。

应用程序.js

import "./styles.css";
import { useScrollPercentage } from "react-scroll-percentage";
import { useState } from "react";

export default function App() {
  const [ref, percentage] = useScrollPercentage({
    threshold: 0
  });

  // how to set the value of currentPercentage to percentage, while I can change the percentage by button
  const [currentPercentage, setCurrentPercentage] = useState(0);

  const onBtnClick = (num) => {
    setCurrentPercentage(num);
  };

  return (
    <div className="App" ref={ref}>
      <button
        onClick={() => {
          onBtnClick(50);
        }}
      >
        Change to 50%
      </button>
      <button
        onClick={() => {
          onBtnClick(100);
        }}
      >
        Change to 100%
      </button>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
      <h2>{`Percentage scrolled: ${percentage.toPrecision(2) * 100}%.`}</h2>
    </div>
  );
}

代码沙盒
https://codesandbox.io/s/still-brook-hqb92?file=/src/App.js:0-2242

Answer 1

您可以使用useEffect ：

useEffect(()=>{setCurrentPercentage(percentage)}, [percentage])

更新的沙盒