javascript - true 和 falsey 值作为 useState 的初始值未正确反射(reflect)

Question

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

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

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

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

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

Answer 1

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

使用useEffect钩子(Hook)，因为这正是它的设计目的:

// 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 .