尝试运行三元条件,该条件将图像(如果未定义)设置为我的src文件夹中的图像。但是抛出一个错误,说它是未定义的

时间:2018-08-19 03:53:13

标签: reactjs axios

我正在尝试运行三元条件,如果对象未定义,则将其替换为我在src文件夹中拥有的图像。如果定义了该对象,则该图像就是我试图加载的API中的图像。但是,即使我将其重置为可以确定的对象,它也会不断抛出一个错误,即对象未定义。

> render() {
>        const dogList = this.state.Dogs.map( Dog  =>{
>           const dogPic = (Dog.media.photos.photo[2].$t !== undefined ? Dog.media.photos.photo[0].$t : noPic)
>            return(
>                <div className="box1" key={Dog.id.$t}><div className='text1'>{Dog.name.$t} | {Dog.age.$t}<Link
> to={`/Dogs/${Dog.id.$t}`}><img className="dog1" src={noPic}/></Link>
>                </div></div>
>            )
>        })

1 个答案:

答案 0 :(得分:0)

这就是您想要的。您需要首先检查Dog.media.photos.photo[2]是否存在。

render() {
        const dogList = this.state.Dogs.map(Dog => {
            const dogPic =
                (!!Dog.media.photos.photo[2] && Dog.media.photos.photo[2].$t !== undefined)
                    ? Dog.media.photos.photo[0].$t
                    : noPic;
            return (
                <div className="box1" key={Dog.id.$t}>
                    <div className="text1">
                        {Dog.name.$t} | {Dog.age.$t}
                        <Link to={`/Dogs/${Dog.id.$t}`}>
                            <img className="dog1" src={noPic} />
                        </Link>
                    </div>
                </div>
            );
        });
    }