时间戳

首页 > 解决方案 > React 默认调用不带括号的函数 useState

javascript - React 默认调用不带括号的函数 useState

问题描述

我有一个名为getAllEmployees的函数，我从另一个文件中导出它。

const getAllEmployees = () => {
    return [1,2,3,4,5,6,7,8,9]
}

export { getAllEmployees }

现在我使用React.useState(getAllEmployees)。这给了我结果，当我像React.useState(getAllEmployees())一样调用时，它也给了我相同的结果，当像React.useState(() => getAllEmployees())一样调用时，这也给了我相同的结果。

在这里导入

import { getAllEmployees } from './Service/Service'

与 useState 一起使用

const [result] = useState(getAllEmployees ) or
const [result] = useState(getAllEmployees()) or
const [result] = useState(() => getAllEmployees())

console.log(result)

对于所有这些结果是

 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

我的问题是为什么他们给我相同的结果，这是正确的方法？

标签： javascriptreactjsfunctionreact-hooksuse-state

解决方案

为什么他们给我同样的结果？

  1. const [result] = useState(getAllEmployees)

    React useStatehook 可以采用惰性初始化函数，在组件安装和状态初始化时调用。您正在为 React 传递一个回调来调用并使用返回值初始化状态。

  2. const [result] = useState(getAllEmployees())

    这只是立即调用函数并将返回值传递给钩子以作为初始状态。

  3. const [result] = useState(() => getAllEmployees())

    这与 1 相同，但您传递了一个匿名初始化函数。

哪个是正确的方法？

正确的方法是适用于您的用例、易于阅读、理解和维护的方法。1 或 2 都可以，如果很清楚这getAllEmployees是一个函数，则为 1，如果不是，则为 2。3是不必要的。

推荐阅读