React useState首次点击状态不更新问题求助

核心问题 #

1. useState初始值未定义：const [redirect, setRedirect] = useState(); 初始值为undefined，首次执行redirect ? ... : ...判断时逻辑不符合预期。
2. state异步更新特性误解：调用setRedirect后立刻console.log(redirect)看到的是旧值，这是React异步批量更新state的正常表现，并非state未更新。
3. 渲染逻辑与点击事件脱节：你先根据redirect渲染Link或div，但第一次点击时才触发PluNum更新redirect，组件重新渲染成Link是在点击之后，所以第一次点击的是div，不会触发跳转；第二次点击时redirect已是true，渲染的是Link，才会正常跳转。

修复方案 #

1. 改用编程式导航（推荐）

无需依赖redirect state控制渲染，直接在逻辑里处理跳转，更简洁可靠：

• 导入useNavigate钩子：

import { useNavigate } from 'react-router-dom';

• 在组件内初始化导航函数：

const navigate = useNavigate();

• 修改PluNum函数，直接触发导航：

const [redirect, setRedirect] = useState(false); // 给布尔值默认值，避免undefined
const PluNum = (plu) => {
  const product = posts.find(item => item.plu.toString() === plu.toString());
  if (product) {
    const prevproduct = items.find(item => item.id === product.id);
    setSelectedpr(product);
    setNum("");
    // 直接跳转，无需依赖state更新
    navigate('/pluitem');
  } else {
    toast.error("plu is wrong");
  }
};

• 渲染部分简化，无需判断redirect：

<div className="digit" onClick={() => PluNum(num)}>submit</div>

2. 若坚持原渲染逻辑的修复

如果一定要通过redirect控制渲染，需确保点击Link时不再重复调用PluNum：

// 初始state设为false
const [redirect, setRedirect] = useState(false);

const PluNum = (plu) => {
  const product = posts.find(item => item.plu.toString() === plu.toString());
  if (product) {
    setSelectedpr(product);
    setNum("");
    setRedirect(true);
  } else {
    setRedirect(false);
    toast.error("plu is wrong");
  }
};

// 渲染时，Link的点击事件不要重复调用PluNum
{redirect ? 
  <Link to="/pluitem" className="digit">submit</Link> 
  : 
  <div className="digit" onClick={() => PluNum(num)}>submit</div>
}

额外说明 #

• 你尝试的setRedirect((prevState) => [prevState, true])这类写法错误，因为redirect是布尔值而非数组，会导致类型混乱，后续判断完全失效。
• 若要验证state是否更新，不要在setRedirect后立刻console.log，改用useEffect监听：

import { useEffect } from 'react';

useEffect(() => {
  console.log('redirect当前值:', redirect);
}, [redirect]);

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