Question

我想将查询结果用作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)时，无论false是什么，我总是得到Boolean(data.result && data.result.token)。

Answer 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。

真实值和虚假值作为useState的初始值未正确反映

1 个答案: