为什么当我用空的购物车登录时，.map出现错误？

Question

I'm working on an e-commerce project with React. Once I have chosen the products and want to see them in the cart,I just have to login to see the products inside the cart. Everything is fine if the cart is full, but if I try to login with the empty cart it gives me the following error: "TypeError: Cannot read property 'map' of null" The components involved are:

//SignInForm.js
export default class SignInForm extends React.Component{
constructor(props){
    super(props);
    this.state={
        username: '',
        password: '',
        error: null
    }
    this.handleChange= this.handleChange.bind(this);
    this.handleSubmit= this.handleSubmit.bind(this);
  }
  handleChange(e){
    let target = e.target;
    let value = target.type === 'checkbox' ? target.checked : target.value;
    let name = target.name;
    this.setState({
      [name]: value,
      error: null
    });
  }
  handleSubmit(e){
    e.preventDefault();
    console.log('The form was submitted with the following data:');
    console.log(this.state);
    const user = {
      email: this.state.username,
      password: this.state.password
    }
    axios.post(`https://reqres.in/api/login`, user)
    .then(res => {
      console.log(res);
      console.log(res.data);
      localStorage.setItem('user', res.data.token);  
        this.props.history.push('/Shopping')
      })    
  };
  render(){
    return(
      <div>              
        <form onSubmit={this.handleSubmit}>                
           <span>Username</span>                    
              <FormGroup controlId="username" bsSize="large">            
                <FormControl
                   type='text'
                   name="username"
                   placeholder='Email'
                   value={this.state.email}
                   onChange={this.handleChange}                        
                 />
               </FormGroup>                 
            <span>Password</span>                    
              <FormGroup controlId="password">            
                 <FormControl
                   type='password'
                   value={this.state.password}
                   onChange={this.handleChange}
                   name="password"
                   placeholder='Password'                                           
                 />
              </FormGroup>                  
           <Button type="submit">
            Login
            </Button>
                {
                  this.state.error !== null ? 
                  <div>
                    {this.state.error}
                  </div>
                  : ''
                }
              </form>
         </div>
    )
  }
}
withRouter(SignInForm);
NavLink(SignInForm);

//Shopping.js, the error is reported in this file
class Shopping extends Component{ 
    componentDidMount(){
        const products =  JSON.parse(localStorage.getItem('products'));
        this.setState({products});    
    }
    render(){
        const products =  JSON.parse(localStorage.getItem('products'));        
        return(
            <div >                 
                {products.map((product, key) =>
                  <CartProduct key={key} data={product}/> 
                 )}                                            
            </div>
        )
    }
}
export default Shopping;

//CartProduct.js
class CartProduct extends React.Component{   
    render(){   
        return(
        ( localStorage.getItem('products') !== null) ? (                   
            <> 
            <Row>
                <Col>
                    <img 
                        src={this.props.data.img}                       
                    />
                </Col>
                <Col>
                    <h4>{this.props.data.name}</h4>
                    <span>{this.props.data.description}</span>
                    <h4>${this.props.data.price}</h4>
                </Col>
                <Col>
            </>
            ):(
                <span>Your cart is empty!</span>
            )
        )
    }
}
export default withRouter(CartProduct);  

Answer 1

You need to return an empty array if there are no products:

const products =  JSON.parse(localStorage.getItem('products '));

should become:

 const products =  JSON.parse(localStorage.getItem('products')) || [];