React+Redux:TypeError: 无法读取 null 的属性“地址" [英] React+Redux:TypeError: Cannot read property 'address' of null

问题描述

我是新手.现在我面临一个问题.我的应用程序运行良好(一个简单的电子商务).当我输入送货地址时，它运行良好.但问题是当我从帐户注销并在运输页面重新登录时，它会显示这样的错误，

I am new to react. Now I am Facing a problem. My app is running well(a simple ecommerce).When I am entering a shipping address, it is running fine. But the problem is when i log out from the account and re login again in shipping page then it shows me an error like this,

TypeError: 无法读取 null 的属性地址"

我正在使用 redux.所以当我从浏览器中删除现有地址时 Localstorage 它运行良好.显示错误

I am using redux.So when I delete the existing address from browsers Localstorage it runs well.Error Showing

ShippingScreen.js

import React,{useState,useEffect} from 'react'
import { Form,Button } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import FormContainer from '../components/FormContainer'
import { saveShippingAddress } from '../actions/cartActions'
import CheckoutSteps from '../components/CheckoutSteps'

function ShippingScreen({history}) {
    
    const cart = useSelector(state => state.cart)
    const { shippingAddress } = cart
    
    const dispatch = useDispatch()
    
    const [address, setAddress] = useState(shippingAddress.address)
    const [phone, setPhone] = useState(shippingAddress.phone)
    const [city, setCity] = useState(shippingAddress.city)
    const [postalCode, setPostalCode] = useState(shippingAddress.postalCode)
    const [country, setCountry] = useState(shippingAddress.country)
    
    const submitHandler = (e) =>{
        e.preventDefault()
        dispatch(saveShippingAddress({ address,phone,city,postalCode,country }))
        history.push('/payment')
    }
    
    return (
        <FormContainer>
            <CheckoutSteps step1 step2 />
            <h1>Shipping Information</h1>
            <Form onSubmit={submitHandler}>
            
            <Form.Group controlId='address'>
                    <Form.Label>Address</Form.Label> 
                    <Form.Control
                        required
                        type='text'
                        placeholder='Enter Address'
                        value={address ? address : ''}
                        onChange={(e)=> setAddress(e.target.value)}>                    
                    </Form.Control>
                </Form.Group>
                
                <Form.Group controlId='phone'>
                    <Form.Label>Phone Number</Form.Label> 
                    <Form.Control
                        required
                        type='number'
                        placeholder='Enter Phone Number'
                        value={phone ? phone : ''}
                        onChange={(e)=> setPhone(e.target.value)}>                    
                    </Form.Control>
                </Form.Group>
                
                <Form.Group controlId='city'>
                    <Form.Label>City</Form.Label> 
                    <Form.Control
                        required
                        type='text'
                        placeholder='Enter City'
                        value={city ? city : ''}
                        onChange={(e)=> setCity(e.target.value)}>                    
                    </Form.Control>
                </Form.Group>
                
                <Form.Group controlId='postalCode'>
                    <Form.Label>Post Code</Form.Label> 
                    <Form.Control
                        required
                        type='number'
                        placeholder='Enter Post Code'
                        value={postalCode ? postalCode : ''}
                        onChange={(e)=> setPostalCode(e.target.value)}>                    
                    </Form.Control>
                </Form.Group>
                
                <Form.Group controlId='country'>
                    <Form.Label>Country</Form.Label> 
                    <Form.Control
                        required
                        type='text'
                        placeholder='Enter Country'
                        value={country ? country : ''}
                        onChange={(e)=> setCountry(e.target.value)}>                    
                    </Form.Control>
                </Form.Group>
                
                <Button type='submit' variant='primary'>
                    Coninue
                </Button>
            
            </Form>
        </FormContainer>
    )
}

export default ShippingScreen

cartReducer.js

import { CART_ADD_ITEM, 
         CART_REMOVE_ITEM,
         CART_SAVE_SHIPPING_ADDRESS,
        
         CART_SAVE_PAYMENT_METHOD
         } from '../constants/cartConstants'

export const cartReducer = (state={ cartItems:[], shippingAddress: {} },action) =>{
    
    switch (action.type){
        case CART_ADD_ITEM:
            const item=action.payload
            const existItem=state.cartItems.find(x=>x.product===item.product)
            
            if(existItem){
                return{
                    ...state,
                    cartItems: state.cartItems.map(x=>
                                                   x.product === existItem.product ? item : x
                                                )
                }
            }else{
                return{
                    ...state,
                    cartItems:[...state.cartItems, item]
                }
            }
            
        case CART_REMOVE_ITEM:
            return{
                ...state,
                cartItems:state.cartItems.filter(x => x.product !== action.payload)
            }
            
        case CART_SAVE_SHIPPING_ADDRESS:
            return{
                ...state,
                shippingAddress: action.payload
            }
            
        case CART_SAVE_PAYMENT_METHOD:
            return{
                ...state,
                paymentMethod: action.payload
            }
            
        default:
            return state
    }
    
}

cartAction.js

import axios from 'axios'
import { CART_ADD_ITEM, 
         CART_REMOVE_ITEM,
         CART_SAVE_SHIPPING_ADDRESS,
         
         CART_SAVE_PAYMENT_METHOD,
          } from '../constants/cartConstants'

export const addToCart = (id, qty) => async (dispatch, getState)=>{
    const {data} =await axios.get(`http://127.0.0.1:8000/api/products/${id}`)
    
    dispatch({
        type:CART_ADD_ITEM,
        payload:{
            product: data._id,
            name: data.name,
            image: data.image,
            price: data.price,
            countInStock: data.countInStock,
            qty
        }
    })
    
    localStorage.setItem('cartItem' , JSON.stringify(getState().cart.cartItems))
}


export const removeFromCart = (id)=>(dispatch, getState) => {
    dispatch({
        type:CART_REMOVE_ITEM,
        payload:id,
    })
    
    localStorage.setItem('cartItem' , 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,
    })
    
    localStorage.setItem('paymentMethod' , JSON.stringify(data))
}

store.js

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { productListReducers,productDetailsReducers } from './reducers/productReducers';
import { cartReducer } from './reducers/cartReducers'
import { userLoginReducer, userRegisterReducer, userDetailsReducer, userUpdateProfileReducer } from './reducers/userReducers'
import { orderCreateReducer } from './reducers/orderReducers'
const reducer = combineReducers({
    productList: productListReducers,
    productDetails: productDetailsReducers,
    cart: cartReducer,
    userLogin: userLoginReducer,
    userRegister: userRegisterReducer,
    userDetails:userDetailsReducer,
    userUpdateProfile:userUpdateProfileReducer,
    orderCreate:orderCreateReducer,
    
})

const cartItemsFromStorage = localStorage.getItem('cartItems') ? 
    JSON.parse(localStorage.getItem('cartItems')) : []
    
const userInfoFromStorage = localStorage.getItem('userInfo') ? 
    JSON.parse(localStorage.getItem('userInfo')) : null
    
const shippingAddressFromStorage = localStorage.getItem('shippingAddress') ? 
    JSON.parse(localStorage.getItem('sgippingAddress')) : {}

const intitialState = {
    cart:{ 
          cartItems: cartItemsFromStorage,
          shippingAddress: shippingAddressFromStorage,
        },
    userLogin:{userInfo: userInfoFromStorage},
}

const middleware = [thunk]

const store= createStore(reducer,intitialState, 
                         composeWithDevTools(applyMiddleware(...middleware)))

export default store

推荐答案

当您尝试从本地存储获取 shippingAddress 时，store.js 文件出现拼写错误.你写了 sgippingAddress 但应该是 shippingAddress 和 h.

There is a typo error on store.js file when you try to get shippingAddress from local storage. You wrote sgippingAddress but should be shippingAddress with the h.

这篇关于React+Redux:TypeError: 无法读取 null 的属性“地址"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！