javascript - 防止状态中出现空嵌套数组

Question

我目前有一个小的 React Redux 应用程序，我可以在其中添加电影，并将图像添加为对象中的嵌套数组。

添加项目后我的状态是什么样的

{
  movies: [
  0:{
    "title": "asda",
    "director": "asda",
    "genre": "asd",
    "description": "asd",
    "images": [
      {
        "name": "george-michael-306600-2-raw.jpg",
        "type": "image/jpeg",
        "size": "65 kB",
        "base64": "data:image/jpeg;base64,/9j/IMAGE//Z",
        "file": {}
      }
    ],
    "id": "ae04f1e8-18bb-434b-a3e3-b02d44e68d2a"
  }
}

然后我将其呈现在我的组件中，如下所示

import React from 'react'
import Slider from 'react-slick'
import { dispatch, connect } from 'react-redux'
import {Icon} from 'react-fa'
import { deleteMovie } from '../../actions/movieActions'

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import './MovieList.scss'

class MovieList extends React.Component{
  constructor(props){
    super (props)
  }

  handleClick(id) {
    dispatch(deleteMovie(id))
  }

  render () {
    // Settings for slick-carousel
    let settings = {
      infinite: true,
      speed: 500
    }


    return (
      <div className='col-lg-12'>
        {this.props.movies.map((b, i) =>
          <div key={i} className="col-lg-2">
            <Slider {...settings}>
              {b.images.map((b, z) =>
                <div className="img-wrapper">
                  <Icon name="trash" className="trash-icon" onClick={(e) =>
                    console.log(this.props.movies[i].id),
                    this.props.onMovieClick.bind(this.props.movies[i].id)
                  }/>
                  <img className="img-responsive" key={z} src={b.base64}></img>
                </div>
              )}
            </Slider>
            <div className="text-left info">
              <h2>{b.title}</h2>
              <p>{b.genre}</p>
            </div>
          </div>
        )}
      </div>
    )
  }
}

// map state from store to props
const mapStateToProps = (state) => {
  return {
    movies: state.movies
  }
};

// Map actions to props
const mapDispatchToProps = (dispatch) => {
  return {
    onMovieClick: (id) => {
      dispatch(deleteMovie(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MovieList)

现在，这可以完美地找到并且我的项目按预期渲染，直到我尝试过滤(删除)一个项目，然后我的内部循环将图像放入 slider {b.images.map((b, z) 失败，我收到错误

无法读取未定义的属性“map”

如果数组为空/未定义，如何保护此内部循环不尝试渲染项目？

在常规 JS 中，我只需将 map 调用包装在检查中以查看图像是否未定义，但如何在 JSX 渲染 block 中解决此问题？

感谢您的帮助

Answer 1

为了防止这种情况，您可以在执行 map 之前使用存在性检查，如下所示:

{b.images && b.images.map((b, z) =>
    <div className="img-wrapper">
        <Icon name="trash" className="trash-icon" onClick={(e) =>
            console.log(this.props.movies[i].id),
            this.props.onMovieClick.bind(this.props.movies[i].id)
        }/>
        <img className="img-responsive" key={z} src={b.base64}></img>
    </div>
)}

b.images 将检查 b.images 是否已定义，然后进行映射。否则它不会渲染任何内容。