真假值作为 useState 的初始值没有被正确反映答案

【问题标题】：Truthy and falsey value as the initial value for useState not being reflected properly真假值作为 useState 的初始值没有被正确反映
【发布时间】：2019-12-15 04:11:38
【问题描述】：

我想使用查询结果作为useState 的初始值。

const {data, loading, error} = useQuery(GET_INFO)
const [value, setValue] = useState(Boolean(data.result && data.result.token))

我只关心初始值是真还是假，这意味着如果令牌变量中有任何类型的字符串，那么我希望它被视为true。如果没有，false。

当我执行console.log(Boolean(data.result && data.result.token)) 时，我会得到正确的true 或false。当我执行console.log(Boolean(!!data.result && data.result.token)) 时，我得到了相同的结果。

但是，当我检查console.log(value) 时，无论Boolean(data.result && data.result.token) 是什么，我总是得到false。

【问题讨论】：

标签： javascript reactjs react-native boolean react-hooks

【解决方案1】：

获取数据是异步的，所以需要等待数据返回后再设置value。

使用useEffect 钩子，因为这正是它的设计目的：

// Initialize to false.
const [value, setValue] = useState(false)
// Begin fetch.
const {data, loading, error} = useQuery(GET_INFO)

// Everytime data changes, this hook will run.
useEffect(() => {
    if(data && data.result) {
        setValue(!!(data.result && data.result.token))
    }
}, [data, setValue])

useEffect 将在 data 更改时运行，这意味着当您的查询返回 data 时，将调用 setValue。

请参阅React docs on hooks。

【讨论】：