undefinded is not an object-CodePudding

Hello I'm facing with render error in my movie app during printing results for movie searching. Im working in React-Native 0.70.5. Here is some code for this activity `

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

const Search = () => {
   const apiurl="https://api.themoviedb.org/3/search/movie?api_key=XXX"
   const [state,setState] = useState({
   s: "Enter a movie",
   results:[]
   });

   const search = () => {
    axios(apiurl   "&query="  state.s).then(({ data }) => {
        let results = data.search;
        console.log(data);
        setState(prevState => {
            return{...prevState, results: results }
        })
    })
    }
  return (
         <View>
         <TextInput
            onChangeText={text => setState(prevState => {
            return {...prevState, s:text}
            })}
            onSubmitEditing={search}
            value={state.s}
         />
        <ScrollView>
            {state.results.map(result =>(
                <View key={result.id}>
                    <Text>{result.title}</Text>
                </View>
            ))}
        </ScrollView>
        </View>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Search;

How to change the construction of this function to print movie titles corectly ?

CodePudding user response：

This is just an example and not the best way to do it.

You need a success flag, something like this:

const [success,setSuccess] = useState(false);

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

       <ScrollView>
            {success && state.results.map(result =>(
                <View key={result.id}>
                    <Text>{result.title}</Text>
                </View>
            ))}
        </ScrollView>

CodePudding user response：

I am not sure but you can try this below ScrollView code...

<ScrollView>
            {state.results.length>0 && (state.results.map((result) =>(
                <View key={result.id}>
                    <Text>{result.title}</Text>
                </View>
   

)))}
        </ScrollView>

CodePudding user response：

use optional chaining. Might be sometimes you don't get result.

<ScrollView>
        {state?.results?.map(result =>(
            <View key={result?.id}>
                <Text>{result?.title}</Text>
            </View>
        ))}
</ScrollView>

Let me know is it helpful or not