React报错：Cannot update during an existing state transition——无收货地址时重定向触发错误的原因咨询

嘿，这个问题我之前也踩过坑！你遇到的错误核心原因很明确——你直接在组件的渲染阶段调用了props.history.push，这违反了React的渲染机制规则。

React的渲染流程是同步执行的，当组件正在渲染（比如执行到你判断shippingAddress的if语句时），此时触发路由跳转会立刻启动新一轮的组件渲染。相当于当前渲染还没走完，你又强行触发新的渲染流程，React自然会报错阻止这种混乱的操作。

解决方法：用useEffect包裹路由跳转逻辑 #

我们需要把这种会触发重新渲染的操作放到useEffect钩子中，因为useEffect是在组件渲染完成后才执行的，不会干扰当前的渲染流程。同时还要监听shippingAddress的变化，确保只有当地址状态改变时才执行跳转判断。

另外，我注意到你原代码里的判断逻辑好像写反了？if(!!shippingAddress)是当收货地址存在时跳转到shipping页面，这显然不符合正常业务逻辑（应该是用户没填地址才跳去填写页面呀），所以我顺便帮你调整了这个判断，你可以根据自己的实际需求再确认。

修改后的代码如下：

const PaymentMethodScreen = (props) => { 
  const [paymentMethod, setPaymentMethod] = useState("PayPal"); 
  const dispatch = useDispatch(); 
  const cart = useSelector(state => state.cartReducer); 
  const { shippingAddress } = cart; 

  // 用useEffect处理路由跳转，避免在渲染阶段触发
  useEffect(() => {
    // 当用户未填写收货地址时，重定向到收货地址页面
    if (!shippingAddress) { 
      props.history.push('/shipping');
    }
  }, [shippingAddress, props.history]); // 依赖项确保状态变化时触发

  const submitHandler = (e) => { 
    e.preventDefault(); 
    dispatch({ type: actions.CART_SAVE_PAYMENT_METHOD, payload: paymentMethod }); 
    props.history.push("/placeholder"); 
  }; 

  return ( 
    <div> 
      <CheckoutSteps step1 step2 step3 /> 
      <form className="form" onSubmit={submitHandler}> 
        {/* 这里是你的表单内容 */}
        <div> 
          <button className="primary" type="submit"> 
            Continue 
          </button> 
        </div> 
      </form> 
    </div> 
  ) 
}; 

export default PaymentMethodScreen;

额外说明 #

• 一定要给useEffect加上正确的依赖数组：[shippingAddress, props.history]，这样只有当收货地址或者history对象变化时，才会执行跳转逻辑，避免不必要的重复执行。
• 我把你原代码里的// *not useful*改成了JSX标准注释格式{/* ... */}，不然在JSX结构里会报错哦。

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