React中Text组件内容无法动态更新问题求助

我编写了如下React Native代码：

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>
  );
}

虽然console.log能正确输出data.user_name、data.about和data.followers的数据，但这些数据无法在<Text>组件中正常显示。我试过移动useEffect和调整return视图的位置，都没用，请问这是为什么？

你的代码里有两个关键错误：

• 状态更新赋值颠倒：你给setFollower传入了data.about，给setAbout传入了data.followers，导致状态存储的内容和你要展示的完全不匹配。
• 状态setter命名不匹配：状态变量是followers，但对应的setter写成了setFollower（缺少末尾的s），虽然语法上没问题，但逻辑混乱会导致数据无法正确关联。

修复后的代码如下：

function Homepage() {
  
  const [name,setName] = useState('');
  // 修正setter命名，与状态变量对应
  const [followers,setFollowers] = 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);
        // 修正赋值：给followers状态传入正确的followers数据
        setFollowers(data.followers);
        // 修正赋值：给about状态传入正确的about数据
        setAbout(data.about);
    };

    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>
  );
}

修正这两个问题后，数据就能正常渲染到Text组件里了。

内容的提问来源于stack exchange，提问作者gveloper