undefined не является объектом (оценивает 'state.selected.clip.clip'), получая эту ошибку с помощью Api в реакции Native

Question

import React,{useState} from 'react';
import axios from 'axios';
import { Video } from 'expo-av';
import { StyleSheet, View,Text, TextInput, ScrollView, Image, TouchableHighlight, Modal, Button } from 'react-native';

export default function App() {
  const apiurl = 'https://api.rawg.io/api/games?page_size=5';
  const [state, setState] = useState({
    s: 'Enter a movie ...',
    results: [],
    selected: [],
  });
  const search = () => {
    axios(apiurl + '&search=' + state.s).then(({data}) => {
      let results = data.results;
      console.log(results);
      setState(prevState => {
        return {
          ...prevState,
          results: results,
        };
      });
    });
  };
  const openPopup = slug => {
    axios('https://api.rawg.io/api/games/' + slug).then(({data}) => {
      let result = data;
      console.log(result);
      setState(prevState => {
        return {...prevState, selected: result};
      });
    });
  };

  return (
    <View>
      <Text> Game Search</Text>
      <TextInput
        onChangeText={text =>
          setState(prevState => {
            return {
              ...prevState,
              s: text,
            };
          })
        }
        value={state.s}
        onSubmitEditing={search}
      />
      <ScrollView>
        {state.results.slice(0, 1).map(result => (
          <TouchableHighlight
            key={result.slug}
            onPress={() => openPopup(result.slug)}>
            <View>
              <Image
                source={{uri: result.background_image}}
                style={{
                  width: 250,
                  height: 250,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                resizeMode="cover"
              />
              <Text>{result.name}</Text>
            </View>
          </TouchableHighlight>
        ))}
      </ScrollView>
      <Modal
        animationType="fade"
        transparent={false}
        visible={typeof state.selected.name != 'undefined'}>
        <ScrollView>
          <View>
            <Text>{state.selected.name}</Text>
            <Image
              source={{uri: state.selected.background_image}}
              style={{
                margin: 20,
                width: '90%',
                height: 300,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              resizeMode="cover"
            />
            <Video
              source={{uri: state.selected.clip.clip}}
              rate={1.0}
              volume={1.0}
              resizeMode="cover"
              shouldPlay
              isLooping
              style={{width: 300, height: 300}}
            />
          </View>
        </ScrollView>
        <Button
          onPress={() =>
            setState(prevState => {
              return {...prevState, selected: {}};
            })
          }
          title="Close"
        />
      </Modal>
    </View>
  );
}

Всякий раз, когда я запускаю его, он выдает мне это сообщение об ошибке для клипа, иначе я не получаю сообщение об ошибке для изображения, имени или чего-либо еще. Кто-нибудь знает как это решить? Это простое приложение, и все коды находятся в приложении. js Здесь я прикрепил изображение ошибки, которую я получаю. Я использую RawG API для создания простого приложения для поиска игр Снимок экрана с этой ошибкой

Answer 1

Вам необходимо обработать случай, когда state.selected.clip равно null или undefined. Вы можете сделать это следующим образом:

{
  state.selected.clip && (
    <Video
      source={{uri: state.selected.clip.clip}}
      rate={1.0}
      volume={1.0}
      resizeMode="cover"
      shouldPlay
      isLooping
      style={{width: 300, height: 300}}
    />
  );
}

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