react.js useState hook 赋值但未使用，不过没关系

Question

我有这个设置，这样当他们点击时渲染是强制的，只需更新一个钩子的状态。有没有更好或更干净的方法来做到这一点..这是一些代码...

const [click, setClick] = useState();

function handle1Click() {
    props.UserInfoObject.setWhichPlot(1)
    setClick(1000 * 60 * 5)
}

return (
    <div>
        <button onClick={handle1Click}>5 Minutes</button>
    </div>

我遇到了这个，这是另一种选择，但我正在尝试尽可能优化，所以我不确定该使用哪种方法，或者是否还有其他方法？

  handleClick = () => {
    // force a re-render
    this.forceUpdate();
  };

我之所以提到这个，是因为弹出警告说“'click' 被分配了一个值，但从未使用过 no-unused-vars

***编辑添加 UserInfoObject class 以供参考

class UserInformation {
    constructor(airValue, waterValue){
        this.airValue = airValue;
        this.waterValue = waterValue;
        this.getCalibrationsFlag = false;
        this.numberDevices = 0;
        this.deviceName = 'defaultName';
        this.currentlyChangingName = false;
        this.whichPlot = 1;
    }
    setAirValue(number) {
        this.airValue = number;
    }
    setWaterValue(number) {
        this.waterValue = number;
    }
    setNumberDevices(int){
        this.numberDevices = int;
    }
    setDeviceName(name){
        this.deviceName = name;
    }
    setCurrentlyChangingName(boolean){
        this.currentlyChangingName = boolean;
    }
    setWhichPlot(number){
        this.whichPlot = number;
    }
}

let UserInfoObject = new UserInformation(10000, -10);

Answer 1

对于 React，您通常应该尽可能使用纯函数式编程。变异 objects 使得正确地做事变得非常非常困难。

改为创建 UserInformation 的状态。当需要更改时，不要改变现有的 object，而是创建一个新的 object。这个 object 是新的这一事实将告诉 React 该组件需要 re-render.

const [userInformation, setUserInformation] = useState({
  airValue, // this should be in the outer scope
  waterValue, // this should be in the outer scope
  getCalibrationsFlag: false,
  numberDevices: 0,
  // ...
});

在 parent 组件中执行此操作，然后将 userInformation 和 setUserInformation 作为 props 向下传递。在child中，handle1Click则可以改为：

const handle1Click = () => setUserInformation({
  ...userInformation,
  whichPlot: 1,
});

在 React 中，state 和 props 都不应该被改变。

react.js useState hook 赋值但未使用，不过没关系

react.js useState hook is assigned a value but not used, but that is ok

render

onclick

reactjs