0

我有一个简单的 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 
}

问题：“值”/状态总是相同的，它在状态传递给函数的那一刻被捕获。

问题：如何访问外部函数的最新状态？

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

4

2 回答 2

0

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

于 2020-06-15T15:47:26.190 回答
0

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

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

// 更新：

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>;
于 2020-06-15T15:24:40.640 回答