React Native Fetch请求无法显示用户帖子属性问题求助

你遇到的问题是：通过Fetch从MongoDB获取帖子数据后，控制台能正常打印返回的JSON，但页面渲染空白，无法显示title、postedBy等属性。

错误原因 #

核心问题出在前端渲染代码里：

1. 遍历data数组时，错误地使用外层的data数组去访问postedBy、title，而非循环中的单个帖子对象item
2. key属性直接传入item对象，不符合React对key的要求（需传入唯一字符串/数字标识）

修复代码 #

修正后的前端渲染代码

return(
  <View style={styles.container}>
    <View style={styles.c1}>
      {
        data.map((item) => {
          return(
            <View key={item._id}>
              <Text style={styles.postedBy}>{item.postedBy.username}</Text>
              <Text style={styles.title}>{item.title}</Text>
            </View>
          )
        })
      }
    </View>  
  </View>
)

可选优化：Fetch请求代码用async/await简化

原请求代码混用.then()和async，统一风格后可读性更强：

const [data, setData] = useState([])
 
useEffect(()=>{
  const fetchPosts = async () => {
    try {
      const userData = await AsyncStorage.getItem('user')
      const res = await fetch('http://10.0.2.2:3000/allposts', {
        headers: {
          'Authorization': 'Bearer ' + JSON.parse(userData).token
        }
      })
      const result = await res.json()
      setData(result.posts)
    } catch (err) {
      console.error('获取帖子失败:', err)
    }
  }
  fetchPosts()
}, [])

说明 #

• 渲染时必须通过循环变量item访问单个帖子的属性，比如item.title、item.postedBy.username（postedBy已被后端populate，包含username字段）
• key使用item._id，这是MongoDB文档的唯一标识，符合React对key的要求
• 优化后的Fetch代码用async/await替代嵌套.then()，更易维护且便于错误捕获

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