从外部 function React JS 访问最新的 state

Question

我有一个简单的 React 组件（Hooks）：

// inside React component

import { someExternalFunction } from "functions"

const [value, setValue] = useState(0)

const handleChange = () => {
    someExternalFunction(value, setValue)
}

// outside of React component

const someExternalFunction = (value, setValue) => {

    console.log(value) // 0

    // testing "set" method    

    setValue(100) // working

    // "set" is async, so lets wait

    // testing "get" method 
    setTimeout(() => console.log(value), 5000) // 0

    // not working 
}

问题：“值”/状态始终相同，它是在 state 传递给 function 时捕获的。

问题：如何在外部 function 中访问最新的 state？

澄清：当然，它不适用于“值”/状态，我只是试图说明我面临的问题，即使用向 function 提供最新 state 的首选方法（通过直接参考）。

Answer 1

只要您不再触发“handleChange”，function 就不会使用新值。 您的 state 是一个数字，因此它不会传递引用而是传递值本身（在本例中为 0）。 当您调用 setValue 时，state 会更新，但您的 timeOut 回调仍使用触发“handleChange”时传递的旧值。

如果您想对 state 做出反应，更改 useEffect 挂钩会更好。 您也可以简单地将 console.log(value) 放在定义 state 的行下方，以检查它是否更改。

// 更新：

const [value, setValue] = React.useState(0);

const handleChange = () => {
  setValue(100);
}

React.useEffect(() => console.log(value), [value]);

或者，如果您想将该逻辑移至可重用的钩子：

// useExternalFunction.js
export useExternalFunction = () => {
  const [value, setValue] = React.useState(0);

  const handleChange = () => {
    setValue(100);
  }

  React.useEffect(() => console.log(value), [value]);

  return {value, handleChange};
}

// component

const {value, handleChange} = useExternalFunction();

return <button onClick={handleChange}>{value}</button>;

Answer 2

值是原始类型，而不是引用类型，它作为复制值传递给 function，因为它永远不会改变。 并且 setTimeout 总是访问一个复制的值。