在 ES6 中，指定用于从 React State 中检索某些值的数组的语法是什么？

Question

我正在使用 React，但我认为我的问题并不特定于 React。

我正在使用库（wagmi）中的钩子，它返回一些状态。 数据 state 是一个数组，我用 dataWhitelist 名称为其命名，稍后我可以在我的代码中访问它，一切都很好：

    const { data: dataWhitelist, isSuccess: isSuccessWhitelist, isError: isErrorWhitelist } = useContractReads({
        contracts: [
            {
            (...)

a = dataWhitelist[0] // ok
b = dataWhitelist[1] // ok

我知道 data.length 是 2，我想做类似的事情：

// this first line fails
    const { data: [numberOfNft, maxNft], isSuccess: isSuccessWhitelist, isError: isErrorWhitelist } = useContractReads({
        contracts: [
            {
            (...)

a = numberOfNft      // I want to do this
b = maxNft           // I want to do this

但它不编译。

有没有可能做这样的事情，语法是什么？

Answer 1

你可以这样做：

const { data, isSuccess: isSuccessWhitelist, isError: isErrorWhitelist } = useContractReads({
        contracts: [
            {
            (...)

// Just Destructure the Array
const [numberOfNft, maxNft] = data;

Answer 2

您可以使用括号表示法解构数组值：

阅读更多解构分配 - JavaScript | MDN

 const exampleReturnValue = {data: [1, 2, 3]}; const useExampleReturnValue = () => exampleReturnValue; const {data: [a, b]} = useExampleReturnValue(); console.log({a, b}); // { a: 1, b: 2 }

Answer 3

好的，这是迄今为止我发现的不太麻烦的解决方案。

我正在使用 next.js，这个钩子肯定不会返回值服务器端。 可选的链接运算符？。 将帮助我避免处理未定义的值服务器端

    const { data: dataWhitelist, isSuccess: isSuccessWhitelist, isError: isErrorWhitelist } = useContractReads({
        contracts: [
        (...)

    const [numberOfNft, maxNft] = [dataWhitelist?.[0], dataWhitelist?.[1]]
        (...)

    React.useEffect(() => {
        setHasMounted(true)
    }, [])
        (...)

return (
        (...)
   {hasMounted && isSuccessWhitelist && <ShowNumberNft numberOfNft={numberOfNft} maxNft={maxNft} />}
        (...)
       )