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

【问题标题】：React - how to update the value using useState dynamicallyReact - 如何使用 useState 动态更新值
【发布时间】：2022-01-07 04:39:07
【问题描述】：

当前用户界面：

更新currentPercentage的值有两种方式。

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

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

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

App.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

【问题讨论】：

您只是想在滚动时更新currentPercentage 状态，还是希望按钮更新滚动位置，从而更新百分比？你要求什么，你想要什么是动态的，这有点模棱两可。

标签： javascript reactjs react-hooks

【解决方案1】：

你可以使用useEffect:

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

更新sandbox

【讨论】：

您还需要更新<h2>{'Percentage scrolled: ${percentage.toPrecision(2) * 100}%.'}</h2> 以使用currentPercentage 而不是percentage，并且可能还需要将.toPrecision(2) * 100 移动到useEffect 中