react-redux - 在反应中的同一组件中添加和编辑

Question

如果 url 是 shipping/1245abcde，则表单应加载来自 dispatch(getOrderDetails(orderId)) 的数据。第一次加载时它确实工作正常，但是当我在浏览器中单击刷新时，它在行显示错误：setAddress

TypeError: Cannot read property 'shippingAddress' of undefined   

在这里，我不能在 useEffect 中调用 useSelector。无论如何要在 useEffect() 中获取 orderDetails 状态。

下面是 ShippingScreen 组件

const ShippingScreen = ({ history, match }) => {
  const orderId = match.params.orderId

  const dispatch = useDispatch()

  const cart = useSelector((state) => state.cart)
  const { shippingAddress } = cart

  const [address, setAddress] = useState(shippingAddress.address)
  const [city, setCity] = useState(shippingAddress.city)
  const [postalCode, setPostalCode] = useState(shippingAddress.postalCode)
  const [country, setCountry] = useState(shippingAddress.country)

  const orderDetails = useSelector((state) => state.orderDetails)
  const { order } = orderDetails

  useEffect(() => {
    if (orderId) {
      dispatch(getOrderDetails(orderId))
      setAddress(order.shippingAddress.address)
      setCity(order.shippingAddress.city)
      setPostalCode(order.shippingAddress.postalCode)
      setCountry(order.shippingAddress.country)
    }
  }, [orderId])

标签： react-reduxreact-hooks