how to solve render error undifined is not a function-CodePudding

Hi here my api return an array of four objects like this example :

res =[{ tutor 1},{tutor 2},{tutor 3},{ tutor 4}]

and I looped through them using the for each array method to return a view that contains the information of each tutor but something is wrong ,I get :

render error undifined is not a function (near'...responsee.foreach')


export default  function TutorsScreen ({ navigation }) {

    let [response ,setResponse] =useState({});

    useEffect(()  =>  
        fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
        .then(res => res.json())
        .then((jsoon)=>{
            setResponse(jsoon)
            console.log(jsoon)}
            ))
            

return(
    response.forEach(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )}))}

CodePudding user response：

This happens only on the first render cycle. The function executed in your useEffect is async and will be executed on mount. However, the view will be rendered before the data has been fetched.

Thus, the response state is an initial empty object. The map function does not exist for an empty object.

I would use undefined for the initial state and return null until the data has been fetched.

    const [response ,setResponse] =useState();

    useEffect(()  => {
      fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
        .then(res => res.json())
        .then((jsoon) => {
            setResponse(jsoon)
            console.log(jsoon)
        })
    }, [])

      if (!response) {
        return null
      }
  return (
    <View>
          {response.map(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )})}
    </View>
  );

Edit: I might be considered more elegant to use an empty array instead (an empty array defines the map function). In this case we do not need the if statement.

const [response ,setResponse] =useState([]);

    useEffect(()  => {
      fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
        .then(res => res.json())
        .then((jsoon) => {
            setResponse(jsoon)
            console.log(jsoon)
        })
    }, [])


  return (
    <View>
          {response.map(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )})}
    </View>
  );

P.S.: In your question you are using forEach. This won't return the Views. As the comments already suggest, use the map function (although this is not the root of the problem).

CodePudding user response：

just change the response you are setting in state

setResponse(jsoon) => setResponse(jsoon[0])

and try again with below code ->

const [response ,setResponse] =useState([]);

useEffect(()  => {
  fetch("https://elitestudents.link/wp-json/wp/v2/users?role=lp_teacher")
    .then(res => res.json())
    .then((jsoon) => {
        setResponse(jsoon[0])
        console.log(jsoon)
    })
}, [])




return (
    <View>
          {response.map(t => {
        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text
                onPress={() => navigation.navigate('Home')}
                style={{ fontSize: 26, fontWeight: 'bold' }}> 
              tutors names : {t.name} </Text>
             </View>
        )})}
    </View>
  );