React-native .map undefined не является объектом

Question

здесь мой код:

componentDidMount() {
        console.log(this.props.navigation.state.params.idFilm)
        getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
            this.setState({
                film: data,
                isLoading: false,
            })
        })
    }

_displayFilm() {
        if(this.state != '') {
            const { film } = this.state
            return (
                <ScrollView>
                    <Image>

                    </Image>
                    <View style={styles.overview_container}>
                        <Text style={styles.overview_title}>{film.title}</Text>
                        <Text style={styles.overview_description}>{film.overview}</Text>
                    </View>
                    <View style={styles.informations_container}>
                        <Text>Sorti le {film.release_date}</Text>
                        <Text>Note : {film.vote_average}</Text>
                        <Text>Nombre de votes : {film.vote_count}</Text>
                        <Text>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
                        <Text>Genre(s) : {film.genres.map((item) => {
                            console.log(item)
                        })}</Text>
                        <Text></Text>
                    </View>
                </ScrollView>
            )
        }
    }

Console.log of film.genres:

Array [
  Object {
    "id": 12,
    "name": "Aventure",
  },
  Object {
    "id": 14,
    "name": "Fantastique",
  },
  Object {
    "id": 10751,
    "name": "Familial",
  },
]

У меня есть эта ошибка:

undefined не является объект (оценивающий 'film.genres.map')

Все хорошо, но не Жанры, у кого-то есть идея, почему .map не работает правильно с моим массивом объекты ? Спасибо-х.

Answer 1

Я иду по шагам:

1. Во-первых, добавьте начальное значение состояния внутри вашего компонента класса

  state = {
    film: null,
    isLoading: false,
  };

2. Во-вторых, вы можете вызвать логическое значение isLoading в true внутри вашего componentDidMount перед вызовом API

  componentDidMount() {
    const { navigation } = this.props;
    this.setState({ isLoading: true });

    getFilmDetailFromApi(navigation.state.params.idFilm).then((data) => {
      this.setState({ film: data, isLoading: false });
    });
  }

3. Теперь мы можем использовать эту isLoading опору для рендеринга счетчика или любого пользовательского интерфейса загрузки перед рендерингом фильмов, поскольку они еще не доступны для доступа .

_displayFilm() {
    const { film, isLoading } = this.state;

    if (isLoading) {
      return <View>Loading films...</View>;
    }

    return (
      <ScrollView>
        <Image></Image>
        <View style={styles.overview_container}>
          <Text style={styles.overview_title}>{film.title}</Text>
          <Text style={styles.overview_description}>{film.overview}</Text>
        </View>
        <View style={styles.informations_container}>
          <Text>Sorti le {film.release_date}</Text>
          <Text>Note : {film.vote_average}</Text>
          <Text>Nombre de votes : {film.vote_count}</Text>
          <Text>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
          <Text>
            Genre(s) :{' '}
            {film.genres.map((item) => {
              console.log(item);
            })}
          </Text>
          <Text></Text>
        </View>
      </ScrollView>
    );
  }

Надеюсь, что это работает. Дайте мне знать, если у вас есть какие-либо вопросы!

Answer 2

пожалуйста, попробуйте

...
<Text>Genre(s) : {(film && film.genres) && film.genres.map((item) => {
   console.log(item)
})}</Text>
...

или

...
<Text>Genre(s) : {(film && film.genres) ? film.genres.map((item) => {
   console.log(item)
}) : null}</Text>
...