React Native 将电影的 api 数据显示到屏幕上

Question

Hello i'm trying to display the api of these movies but they wont show on my phone but when i console log they work in my terminal, just having issues displaying the results to the device.

At first i wast giving a error of

TypeError undefined is not an object {evaluating 'state.results.map'}

here is the code below

import React ,{ useState }from 'react';
import axios from'axios';
import { StyleSheet, Text, View ,ScrollView,TextInput} from 'react-native';

export default function App() {
  const apiurl = "http://www.omdbapi.com/?i=tt3896198&apikey=4c0e830";
  const [state,setState] = useState({
    s:'Enter A Movie...',
    results:[],
    selected:{}
  });

  const search = () => {
    axios(apiurl + "&s=" + state.s).then(({data})=>{
      let results = data.Search
      console.log(results)
      setState(prevState =>{
        return {...prevState,results:results}
      })
    })
  }

  return (
    <View style={styles.container}>
      <Text style={styles.Header}>Movie DataBase</Text>
      <TextInput 
      style={styles.searchBar}
      onChangeText={text => setState(prevState =>{
        return{...prevState, s: text}
      })}
      onSubmitEditing={search}
      value = {state.s}

       />
       <ScrollView style={styles.results}>
       {state.results.map(result => {
         <View key={result.imdbID} style={styles.result}>
         <Text>{result.Title}</Text>

         </View>
       })}



       </ScrollView>
    </View>
  );
}

Answer 1

try add something like:

{state.results && state.results.map (...)

or:

{state.results.length > 0 && state.results.map (...)

or:

{state.results !== undefined && state.results.map (...)