Array.map внутри Array.map не работает

Question

Я получаю массив объектов, возвращаемых из базы данных. Я хочу отобразить этот массив, а внутри него я хочу отобразить другой массив. Но я получаю некоторую ошибку.Если кто-нибудь знает, пожалуйста, помогите с этой проблемой.

displayMovies(){
    if(!this.state.body) return ( <h2> Loading.... </h2>)
    else{

        return this.state.body.map((data) => {
            return(
                <div key={data._id}>
                    <li> {data.name} </li>
                    <ul>
                        {
                            return data.map((cast) => {
                                return <li> cast.name </li>
                            })
                        }
                    </ul>
                </div>
            )
        })
    }
}

Ответ данных

Answer 1

Ваша первая функция карты возвращает объект.У объектов нет функции отображения, вместо этого используйте цикл for, внутри цикла проверьте, является ли свойство объектом.Замените вторую карту на что-то вроде этого:

for (const key in object) {
  if (object.hasOwnProperty(key) && typeof(object[key]=='object') {
    // do something with object[key].name 
  }
} 

Answer 2

Вы не находитесь ни в одной функции внутри вложенного цикла, поэтому вам не нужно return что-либо заменять

 return data.map((cast) => {

на

data.map((cast) => {

и добавить функцию применения mapна cast свойство data

displayMovies(){
    if(!this.state.body) return ( <h2> Loading.... </h2>)
    else{

        return this.state.body.map((data) => {
            return(
                <div key={data._id}>
                    <li> {data.name} </li>
                    <ul>
                        {
                            data.cast.map((cast) => {
                                return <li> {cast.name} </li>
                            })
                        }
                    </ul>
                </div>
            )
        })
    }
}