在 React 中，useState 是一個鉤子（hook），用于在函數(shù)組件中添加狀態(tài)管理功能。它返回一個數(shù)組，包含兩個元素：

1. 當前狀態(tài)值（selectedValue）：這是狀態(tài)的當前值。
2. 更新狀態(tài)的函數(shù)（setSelectedValue）：這是一個函數(shù)，你可以調(diào)用它來更新狀態(tài)。

使用 useState

以下是 useState 的基本用法：

import React, { useState } from 'react'; 
function MyComponent() { // 初始化狀態(tài) const [selectedValue, setSelectedValue] = useState(''); // 處理狀態(tài)更新的函數(shù)         const handleChange = (event) => { setSelectedValue(event.target.value); };         return ( <div> <input type="text" value={selectedValue} onChange={handleChange} /> <p>Current value: {selectedValue}</p> </div> ); }

解釋

1. const [selectedValue, setSelectedValue] = useState('')：

   • selectedValue 是當前的狀態(tài)值。在這個例子中，它的初始值是空字符串 ''。
   • setSelectedValue 是更新狀態(tài)的函數(shù)。你可以調(diào)用這個函數(shù)來改變 selectedValue 的值。

2. 更新狀態(tài)：

   • 在 handleChange 函數(shù)中，通過 setSelectedValue(event.target.value) 更新狀態(tài)。這個函數(shù)會觸發(fā)組件的重新渲染，使新的狀態(tài)值反映在 UI 上。

注意事項

• 狀態(tài)更新是異步的：調(diào)用 setSelectedValue 不會立即更新 selectedValue 的值。狀態(tài)更新通常會被異步處理，React 會批量更新狀態(tài)并重新渲染組件。

• 函數(shù)式更新：如果你需要基于當前狀態(tài)計算新的狀態(tài)值，建議使用函數(shù)式更新。比如：

  setSelectedValue(prevValue => prevValue + ' updated');

  這可以確保你獲得的是最新的狀態(tài)值，特別是在多次更新時。