作为道具传递的响应处理空值

Question

我试图返回'null‘道具值的占位符。我尝试运行一个三元运算符和' if‘条件语句，以检查在呈现之前是否存在值。

道具从父组件传递到子组件，而数据则通过react路由器-dom的“历史”方法推送到另一个子组件。

但是，当我运行console.log时，当我试图单击包含“null”的图像时，就会遇到当前问题。

​

​

Carousel.js

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import './Carousel.css';

const ImageCarousel = props => {
    const photos = props.history.location.state.resources.photos;
    return (
        <>
            <button className="backBtn" onClick={props.history.goBack}>Click to go back</button>
            <Carousel>
                {
                    photos.map(photo => {
                        return (
                            <div>
                                <img className='image' src={photo.url} alt="rental-carousel" />
                            </div>
                        )
                    })
                }
            </Carousel>
            <div className="address-container">
                <p className="address">Address:</p>
                <p className="address-info">{' '}{props.history && props.history.location.state.address}</p>
            </div>
        </>
    )
}

export default ImageCarousel;

Answer 1

在获得photos值之前，需要检查它是否为null

const photos = props.history.location.state && props.history.location.state.resources ? 
    props.history.location.state.resources.photos : 
    [];

Answer 2

你能试试新的吗？可选链式操作符：

const photos = props?.history?.location?.state?.resources?.photos;

然后在呈现之前检查照片是否未定义。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Answer 3

在分配支柱之前检查空值或未定义

if (props === null ) {
 ......
}
const photos = props?.history?.location?.state?.resources?.photos;