如何通过React useState钩子在按钮点击时更新状态？

问题中的错误点 #

1. setCombine调用方式错误：useState的更新函数仅接收一个参数（新的状态值），你传入了t和s两个参数，这会导致状态被错误设置为t的值，而非期望的数组对象。
2. 异步状态的console.log问题：useState的状态更新是异步的，直接在setCombine后console.log(Combine)只能拿到更新前的旧值，无法看到最新状态。

正确实现代码 #

根据你的需求（更新数组索引0的对象为{makeTeacher: t, makeSub: s}），有两种常见实现方式：

方式1：直接替换整个数组（适用于数组仅包含这一个元素的场景）

const showStatus = (t, s) => {
  // 创建新的数组，替换原数组的内容
  setCombine([{ makeTeacher: t, makeSub: s }]);
};

方式2：仅更新数组第一个元素（保留数组其他元素的场景）

如果数组中还有其他元素需要保留，使用函数式更新确保拿到最新的前状态，同时遵循React状态不可变原则：

const showStatus = (t, s) => {
  setCombine(prevCombine => {
    // 复制原数组，避免修改原状态
    const updatedCombine = [...prevCombine];
    // 更新索引0的对象
    updatedCombine[0] = { makeTeacher: t, makeSub: s };
    return updatedCombine;
  });
};

查看最新状态的正确方式 #

要查看更新后的Combine状态，需要通过useEffect监听状态变化：

import { useState, useEffect } from 'react';

// ... 其他代码 ...

useEffect(() => {
  console.log('最新Combine状态:', Combine);
}, [Combine]); // 仅当Combine变化时执行

按钮渲染逻辑优化 #

原逻辑中Teacher && Subject可能在值为0等假值时误判，可优化为更严谨的判断：

{Teacher != null && Subject != null && (
  <button onClick={() => showStatus(Teacher, Subject)}>save</button>
)}

内容的提问来源于stack exchange，提问作者S.M. Turag