将函数传递给 useEffect 并返回结果答案

【问题标题】：Pass function into useeffect and return result将函数传递给 useEffect 并返回结果
【发布时间】：2021-02-15 13:34:07
【问题描述】：

背景：

我有一个useEffect，它只运行一次页面渲染。我在许多路线上使用它。

打字变得重复，正在考虑将其放入我拥有的包含有用的可重用代码的 function_helper 文件中。

目标：

我正在尝试将此useEffect 代码放入该帮助文件中，并在需要时调用它。我已经能够调用它并传递一个函数来运行。但是我无法从使用效果中传递给调用的函数中获取返回结果。我并不总是需要返回被调用的函数，但我目前需要，并且能够做到这一点会很方便。

我目前使用的：（不在帮助文件中，这是我在实际渲染的组件中使用的）

 const [count, setCount] = useState(0);
     useEffect( event => {
        setCount(100);
           function a(event) {
            function_abc()
        }
          a(event)
    }, [count])

到目前为止我实现目标的代码

export  function useffect_run_once(function_to_run) {
    var result
    const [count, setCount] = useState(0);
     useEffect( event => {
        setCount(100);
           function a(event) {
            result =   function_to_run()
            console.log("ttttttttttttttttttt: ",result)
        }
          a(event)
    }, [count])
   // return result
    // runs once on page load. Due to the '[]'
}

我的尝试

我尝试了各种方法，例如在 useEffect 的每一层上设置返回值，设置返回的结果变量，使它们与等待异步。

【问题讨论】：

您的 useEffect 代码错误。你到底想发生什么。用你的代码

标签： javascript reactjs return use-effect use-state

【解决方案1】：

我认为您不了解useEffect 的工作原理。您的 useEffect 代码不起作用，并且它仅在连续运行时才运行。它的依赖项之一是count，您还在useEffect 内设置count，因此它将继续无限运行。您还向它传递了一个 event 参数，这没有意义 useEffect 函数参数本身不接受参数。

我也不知道你说的返回结果返回什么结果是什么意思。 useEffect 不返回结果。如果你想运行一个常规函数，只需运行它并得到它的结果，你不需要useEffect。如果您想运行该函数并获得其结果，请使用 setState 和函数。

像这样：

function run_once() {
    console.log('This runs once')
    return 4    // return this value once   
}


const [once, setOnce] = useState(run_once());

return (
    <div>
        Value: {once}
    </div>
)

如果你想使用useEffect，你可以确保你的依赖是一个空数组：

function run_once() {
    console.log('This runs once')
    return 4    // return this value once   
}

const [once, setOnce] = useState(0);

useEffect( () => {
    console.log('Setting once')
    setOnce(run_once())
}, [])   // dependencies is empty meaning it doesn't rerun `useEffect` again

【讨论】：