React中useState点击更新滞后问题求助：需两次点击才生效

你遇到的点击两次才更新状态的问题，核心是状态更新的顺序和依赖错误：在点击按钮时，你先基于**更新前的旧状态theValue**判断并设置disablePrev/disableNext，之后才更新theValue。但React的setState是异步操作，这就导致禁用状态的判断始终慢一拍，和选中的按钮值不同步。

调整逻辑顺序，先获取当前点击的按钮编号（新值），再基于这个新值判断禁用状态，最后更新theValue，确保所有状态都基于最新的目标值同步更新：

const [theValue, setTheValue] = useState({first: 1});
const [disableNext, setDisableNext] = useState(false);
const [disablePrev, setDisablePrev] = useState(true);

// 补充Previous/Next按钮的同步逻辑
const prevButton = () => {
  const newValue = theValue.first - 1;
  setDisablePrev(newValue === 1);
  setDisableNext(newValue < 50);
  setTheValue({...theValue, first: newValue});
};

const nextButton = () => {
  const newValue = theValue.first + 1;
  setDisablePrev(newValue > 1);
  setDisableNext(newValue === 50);
  setTheValue({...theValue, first: newValue});
};

return (
  <>
    <div className="flex flex-row">
      {disablePrev ? (
        <div className="flex flex-1 justify-start">
          <button type="button" className="btn bg-gray-300 text-gray-400 m-10" disabled>Previous</button>
        </div>
      ) : (
        <div className="flex flex-1 justify-start">
          <button type="button" className="btn bg-jamb-light-green text-white m-10 hover:bg-green-400" onClick={prevButton}>Previous</button>
        </div>
      )}
      
      {disableNext ? (
        <div className="flex flex-1 justify-end">
          <button type="button" className="btn bg-gray-300 text-gray-400 m-10" disabled>Next</button>
        </div>
      ) : (
        <div className="flex flex-1 justify-end">
          <button type="button" className="btn bg-jamb-light-green text-white m-10 hover:bg-green-400" onClick={nextButton}>Next</button>
        </div>
      )}
    </div>
    <div>
      {[...Array(50)].map((item, index) => {
        const buttonNum = index + 1;
        return (
          <button
            key={index}
            className={buttonNum === theValue.first 
              ? "w-10 h-10 p-2 m-0.5 rounded-full bg-green-500 text-white" 
              : "w-10 p-2 m-0.5 rounded-full bg-red-300 hover:bg-green-400 hover:text-white"}
            onClick={() => {
              const newValue = buttonNum;
              // 基于新值判断禁用状态
              setDisablePrev(newValue === 1);
              setDisableNext(newValue === 50);
              // 更新选中值
              setTheValue({...theValue, first: newValue});
            }}
          >
            {buttonNum}
          </button>
        );
      })}
    </div>
  </>
);

• 先定义newValue = index + 1（当前点击的按钮编号），所有禁用状态的判断都基于这个新值，而非旧的theValue
• 简化禁用状态的判断逻辑：disablePrev仅需判断新值是否为1，disableNext仅需判断新值是否为50，无需复杂多条件判断
• 同步更新disablePrev/disableNext和theValue，确保状态完全一致

内容的提问来源于stack exchange，提问作者Misbahu Abubakar