react 记录 useState 2次状态

React 的 `useState` Hook 允许你在组件内部维护状态。当你调用 `useState` 并传入一个初始值时，它将返回一个数组，第一个元素是你当前的状态，第二个元素是一个用来更新状态的 setter 函数。

如果你想记录状态变化的两次实例，你可以这样做：

const [state, setState] = useState(initialValue);

// 记录状态第一次变更
const initialStateChange = state;

// 更新状态
setState(newState);

// 在适当的地方，如 componentDidUpdate 或者 useEffect 清洁阶段，获取第二次状态
useEffect(() => {
  const nextStateChange = state; // 这里获取到的状态是更新后的状态
  console.log('第二次状态:', nextStateChange);
}, [state]); // 注意这里，我们需要监听 state 变化

通过这种方式，你可以分别获取状态的初始值和更新后的值。不过通常情况下，我们关心的是状态的变化过程而不是单一的具体状态值，除非有特殊需求。

相关问题

react表格选中记录

在React中，实现表格选择功能通常涉及到状态管理和组件交互。一种常见的做法是使用`state`来跟踪当前选中的行或单元格。以下是一个基本步骤：

1. 创建一个`selectedRows`状态数组，初始化为空数组。

const [selectedRows, setSelectedRows] = useState([]);

2. 在表格组件中，为每一行添加一个`onClick`事件处理器，当点击某一行时更新`selectedRows`。

{rows.map((row, index) => (
  <tr key={index} onClick={() => setSelectedRows([...selectedRows, index])}>
    {/* 表格数据 */}
  </tr>
))}

3. 可能需要提供一些视觉反馈，比如高亮选中的行或者给每个单元格添加一个复选框。你可以为复选框添加状态，并绑定到行索引，以便控制选中状态。

<input type="checkbox" checked={selectedRows.includes(index)} onChange={() => setSelectedRows(selectedRows.includes(index) ? selectedRows.filter(_ => _ !== index) : [...selectedRows, index])} />

4. 提供清除选择的功能，例如在右上角添加一个清除按钮，触发时清空所有已选行。

<Button onClick={() => setSelectedRows([])}>清除选择</Button>