将 useState 挂钩存储在一个通用对象中不起作用

Question

尝试在一个对象中组织应用程序挂钩：

最小、完整、可验证的示例

而不是这个：

export default function App() {
    const [count1, setCount1] = useState(0)
    const [count2, setCount2] = useState(0)

// Usage:
setCount1(17)
console.log(count1)
//-> 17

...这个：

export default function App() {
    let hook = {
        "count1": {
            "set": "",
            "n": 0
        },
        "count2": {
            "set": "",
            "n": 0
        }
    }
}

const [hook.count1.n, hook.count1.set] = useState(0)
const [hook.count2.n, hook.count2.set] = useState(0)

也尝试过这种方式，但没有运气：

const [hook.count1['n'], hook.count1['set'] = useState(0)
const [hook.count2['n'], hook.count2['set'] = useState(0)

打算这样使用：

// Usage:
hook.count2.set(17)
console.log(hook.count2.n)
// Expected 17, but...

运气不好 :( 抛出此错误：

意外的令牌，应为“，”（16,13） （hook和count1之间的“.”）

为什么我不能将钩子状态和设置器聚合为对象属性和方法？泰基思:^)

Answer 1

useState 钩子应该返回一个数组，该数组由索引 0 处的值和索引 1 处的 setter 函数组成。因此，通常所做的是将数组解构为 2 个其他变量，这些变量我们给出了我们想要的名称。您的问题不在于钩子本身，而在于数组解构，据我所知，它不允许您将数组解构为对象属性。如果您在浏览器控制台尝试以下类似操作，您会发现它也不起作用。

const t = [1, () => {}]
const obj = {n: 0, s: null}
const [obj.n, obj.s] = t

您会看到一条错误消息：Uncaught SyntaxError: Illegal property in declaration context。 所以总结一下，据我所知，javascript语法不允许你这样做。

Answer 2

我无法理解您将值和 setter 分配给 hooks 对象的方法背后的意图。我的建议是使用一个对象，该对象通过单个 useState 实例保存所有计数。

这样的事情有用吗？如果不能，您能否详细说明为什么您需要使用类似于您所描述的方法？

export default function App() {
  const [counters, setCouters] = useState({ count1: 0, count2: 0 })

  // usage
  setCounters({ ...counters, count1: 1 })

  // ...

  return null
}

或者，如果出于某种原因你真的希望它成为一个对象，你可以这样做：

export default function App() {
  const hooks = {
    count1: {},
    count2: {},
  }

  const [count1, setCount1] = React.useState(0)
  const [count2, setCount2] = React.useState(0)

  hooks.count1.n = count1
  hooks.count1.set = setCount1
  
  hooks.count2.n = count2
  hooks.count2.set = setCount2

  // ...

  return null
}