使用 useState([])

简介

useState([]) 是 React Hooks 中的一个 Hook，用于在函数组件中使用状态(state)。它接收一个初始值作为参数，并返回一个包含状态值和状态更新函数的数组。

使用方法

以下是使用 useState([]) 的基本示例：

import React, { useState } from 'react';

function MyComponent() {
  const [myArray, setMyArray] = useState([]);

  // 在组件渲染时输出状态值
  console.log(myArray);

  // 修改状态值
  const addItem = (item) => {
    setMyArray([...myArray, item]);
  };

  return (
    <div>
      <button onClick={() => addItem('New Item')}>Add Item</button>
    </div>
  );
}

在上面的例子中，我们通过解构赋值从 useState([]) 返回的数组中取出了 myArray 和 setMyArray 两个值，myArray 是状态值，setMyArray 是用于更新状态的函数。

我们通过在组件渲染时输出状态值，可以看到初始值为空数组。随后，我们提供了一个 addItem 函数，用于向数组中添加新的项目。每次点击按钮时，我们都会调用 setMyArray 函数来更新状态值。

注意事项

• useState([]) 只能在 React 函数组件或其他自定义 Hooks 中使用，不能在类组件中使用。
• 你可以在一个组件中使用多个 useState，每个 Hook 的状态是独立的。
• 使用 useState([]) 时，状态更新函数会替换原有的状态值，而不是合并。
• useState([]) 可以接收任何 JavaScript 数据类型作为初始值，不仅仅是空数组。

详细了解更多关于 useState 的信息。

总结

useState([]) 是 React Hooks 中的一个重要 Hook，它允许我们在函数组件中使用状态(state)。通过提供初始值并调用状态更新函数，我们可以轻松地在组件中管理和修改状态。