Question 380264 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why text in react doesn't change dynamically

I have this code here:

function Homepage() {
  
  const [name,setName] = useState('');
  const [followers,setFollower] = useState('');
  const [about,setAbout] = useState('');

  useEffect(() => {
    
    const fetchData = async () => {
        const data = await loadhomepagescript();
        console.log('User Name:', data.user_name);
        console.log('About:', data.about);
        console.log('Followers:', data.followers);

        setName(data.user_name);
        setFollower(data.about);
        setAbout(data.followers);
    };

    fetchData();
}, []);

  return (
    <View style={styles.homepage}>
    <View style={styles.uinfo}>
      <Text style={{fontWeight:'bold', textAlign: 'left'}}>{name}</Text>
      <Text style={{fontWeight:'bold', textAlign: 'left'}}>{followers}</Text>
      <Text style={{fontWeight:'bold', textAlign: 'left'}}>{about}</Text>
    </View>
    </View>
  );
}

For some reason even though the data.user_name, data.about and data.followers console.log right I can’t pass them to my <Text> elements. Why’s that?

I tried moving the useEffect and also moving the return of the views, but nothing worked

Tags:

2

Answers


  1. 0

    The issue could be happened due to the order of execution. Since useEffect is asynchronous, it might take some time to fetch the data.
    Therefore, if the component renders before the data is available, the initial empty state values will be displayed.

    You can conditionally render the component only when the data is available like below.

    return (
  <View style={styles.homepage}>
    {name && followers && about && (
      <View style={styles.uinfo}>
        <Text style={{ fontWeight: 'bold', textAlign: 'left' }}>{name}</Text>
        <Text style={{ fontWeight: 'bold', textAlign: 'left' }}>{followers}</Text>
        <Text style={{ fontWeight: 'bold', textAlign: 'left' }}>{about}</Text>
      </View>
    )}
  </View>
);
    Login or Signup to reply.
  2. 0

    in my opinion stop using useEffect anymore and use react-query instead to handle fetching data properly something like that:

    const  {data, isLoading, error} = useQuery('data', async() =>{
  await loadhomepagescript();
})
if(isLoading){
  return (
    <View style={styles.homepage}>
      <Text>loading...</Text>
    </View>
  );
}
if(error){
  (
    <View style={styles.homepage}>
      <Text>{error.message}</Text>
    </View>
  );
}
return (
    <View style={styles.homepage}>
    <View style={styles.uinfo}>
      <Text style={{fontWeight:'bold', textAlign: 'left'}}>{data.user_name}</Text>
      <Text style={{fontWeight:'bold', textAlign: 'left'}}>{data.followers}</Text>
      <Text style={{fontWeight:'bold', textAlign: 'left'}}>{data.about}</Text>
    </View>
    </View>
  );

    if you need to use the useEffect hook you need to pass that data that comes from the loadhomepagescript function as a dependency in the useEffect array dependencies and be careful because it is an object so you need to memorize that data using useMemo hook

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search