在基于数组的循环中创建 useState 可能吗?

Question

const columns = ['task', 'category'];
for (const text in columns) {
const [text, setText] = useState();
}

我希望使用循环创建多个useState事物，但是将事物连接在一起似乎是一个问题。 我希望它做的是创建常量：任务，设置任务|类别，设置类别

Answer 1

看看这个： https://reactjs.org/docs/hooks-rules.html

明确提到：

仅在顶层调用钩子 不要在循环、条件或嵌套函数中调用钩子。相反，请始终在顶部使用 Hooks 你的 React 函数的级别。通过遵循此规则，您可以确保 每次呈现组件时，钩子的调用顺序相同。 这就是允许 React 正确保留 Hooks 状态的原因 在多个 useState 和 useEffect 调用之间。(如果你好奇， 我们将在下面深入解释这一点。

Answer 2

const [text, setText] = ...只是一个解构赋值，您可以根据需要存储useState(..)(具有两个元素的数组(的结果，例如：

const columns = ['task', 'category'];
const state = {};
for (const prop of columns) {
const resultArr = useState();
state[prop] = {
val: resultArr[0],
fn: resultArr[1]
};
}

你可以像这样使用结果：

<button onClick={() => state.task.fn('new value')}>{state.task.val}</button>

但正如@EmileBergeron提到的，似乎没有任何理由使用这样的useState。肯定有一种更传统的方法来解决您面临的问题。

Answer 3

在引擎盖下，useState依赖于光纤中的链接列表类型的嵌套数据结构。每次调用useState该结构时都会"解包"以获取与下一个钩子调用关联的数据。

这是一篇很好的文章，深入探讨了钩子的工作原理。

理论上，只要你的循环总是执行相同的次数，你可以在循环中使用钩子。然而，正如其他人在这里所说，这不是标准的做事方式，也是不可取的。

Answer 4

const columns = ['task', 'category'];
columns.map( (column, index) => {
let col = column;
let setCol = column+index;
[col, setCol] = useState(false)
})

这样，它将为数组列中元素的每次迭代提供唯一的状态

Answer 5

const [uploadAnimal, setAnimal] = useState(['cat']);
const loopFun = () => {
const arr = uploadAnimal
for (let i = 0; i < 10; i++) {

arr.push('DOG')
setUploadCount([...arr])
} };