在浏览器控制台中获取此警告消息

Question

错误:你应该在React.useEffect()中调用navigate()，而不是在组件第一次呈现时调用。我每次在我的浏览器控制台得到这个警告，因为我是新的反应，我不知道如何删除警告信息，如果有人可以帮助我感谢他们。

PaymentScreen.js:

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { savePaymentMethod } from '../actions/cartActions';
import CheckoutSteps from '../components/CheckoutSteps'
export default function PaymentScreen(props) {
const history = useNavigate();
const cart = useSelector((state) => state.cart);
const {shippingAddress} = cart;
if(!shippingAddress.address){
history('/shipping');//getting console message for this line
}
const [paymentMethod, setPaymentMethod] = useState('Paypal');
const dispatch = useDispatch();
const submitHandler = (e)=>{
e.preventDefault();
dispatch(savePaymentMethod(paymentMethod));
history('/placeorder');
}
return (
<div>
<CheckoutSteps step1 step2 step3></CheckoutSteps>
<form className='form' onSubmit={submitHandler}>
<div>
<h1>Payment Method</h1>
</div>
<div>
<div>
<input type="radio" id="paypal" value="PayPal" name ="paymentMethod" required checked onChange={(e)=> setPaymentMethod(e.target.value)}></input>
<label htmlFor='paypal'>PayPal</label>
</div>
</div>
<div>
<div>
<input type="radio" id="stripe" value="Stripe" name ="paymentMethod" required onChange={(e)=> setPaymentMethod(e.target.value)}></input>
<label htmlFor='stripe'>Stripe</label>
</div>
</div>
<div>
<button className='primary' type='submit'>Continue</button>
</div>
</form>
</div>
)
}

CartAction.js:

import Axios from "axios";
import { CART_ADD_ITEM, CART_REMOVE_ITEM, CART_SAVE_PAYMENT_METHOD, CART_SAVE_SHIPPING_ADDRESS } from "../constants/cartConstants";
export const addToCart = (productId,qty)=> async( dispatch, getState)=>{
const {data} = await Axios.get(`/api/products/${productId}`);
dispatch({
type: CART_ADD_ITEM,
payload: {
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
product: data._id,
qty,
}
});
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
};

export const removeFromCart = (productId) => (dispatch,getstate) =>{
dispatch({type : CART_REMOVE_ITEM, payload: productId});
localStorage.setItem('cartItems', JSON.stringify(getstate().cart.cartItems))
}
export const saveShippingAddress=(data)=>(dispatch)=>{
dispatch({type: CART_SAVE_SHIPPING_ADDRESS, payload : data});
localStorage.setItem('shippingAddress',JSON.stringify(data));
}
export const savePaymentMethod=(data)=>(dispatch)=>{
dispatch( {type : CART_SAVE_PAYMENT_METHOD, payload:data});
}

Answer 1

警告是正确的，你应该把它放在useEffect钩子中，以避免每次执行它，在useEffect中，它将在加载时执行一次

import React, { useState, useEffect } from 'react'
...
...
useEffect(()=>{
if(!shippingAddress && shippingAddress.address){
history('/shipping');//getting console message for this line
}
},[])