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之间的“。”）

为什么不能将挂钩状态和设置器聚合为对象的属性和方法？ Ty Keith：^）

Answer 1

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

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

您将看到以下消息发生错误：未捕获的SyntaxError：声明上下文中的非法属性。因此，据我所知，JavaScript语法不允许您这样做。

Answer 2

我无法理解为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
}

在公用对象中存储useState挂钩不起作用

2 个答案: