React Native - 从api渲染数据时'未定义不是对象'答案

【问题标题】：React Native - 'undefined is not an object' when rendering data from apiReact Native - 从api渲染数据时'未定义不是对象'
【发布时间】：2022-01-01 18:37:39
【问题描述】：

我正在制作一个从 API 获取数据并将其显示在屏幕上的应用程序。渲染屏幕时，会出现以下错误：渲染错误未定义不是对象（正在评估“this.text”）。有趣的是，除了节点模块中的文件之外，我的任何屏幕中都没有像“this.text”这样的东西。无论如何，这是文件

呈现数据的屏幕：

/* the screen that renders the data */
import React, {useEffect, useState} from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const Experts = () => {

    useEffect(()=> {
        fetch('http://icantputtheactualurlcuzitsmyipaddress.com/expertsList/',{
            method: 'GET'
        })
        .then(resp => resp.json)
        .then(data => {
            setData(data)
        })
        .catch(error => console.log('something is not suppose to be happening'))
    
    }, [])


    const [data, setData] = useState([]);    
  

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
            <Text style={styles.item}>{item.name}</Text>
        )}
        
      />
    </SafeAreaView>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: 'teal',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    color: 'white',
  },
  title: {
    fontSize: 32,
  },
});

export default Experts;

我真的很感谢任何输入，我对此有点陌生。

【问题讨论】：

标签： javascript react-native rest

【解决方案1】：

我认为您的数据数组在 API 提取之前第一次是空的，并且您的 FlatList 中的文本正在尝试提取，因此通过“？”提供空值检查。喜欢项目？.name

    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
            <Text style={styles.item}>{item?.name}</Text>
        )}
        keyExtractor = (item, index) => item.id;
      />
    </SafeAreaView>
  );

别忘了添加 keyExtractor

【讨论】：

非常感谢，但我试过了，它没有用，也许是我的语法错误。你能显示你的代码吗？
在主要答案中更新

【解决方案2】：

所以经过一番研究，我发现这是因为效果挂钩中对 api 的调用是一个函数。你需要括号来表示函数。此外，它显示 this.text 的原因是因为它在 json 解析器下。所以到你一直在等待的部分

代码：

    useEffect(()=> {
        fetch('http://skrskr.com/api/experts/',{
            method: 'GET'
        })
        
        /* make sure to put the needed parenthesis */
        
        .then((resp) => resp.json())
        .then(
            (json) => setData(json)
        )
        
        .catch(error => console.log('something is not suppose to be happening'))
    
    }, [])


    const [data, setData] = useState([]);

我希望这能找到需要它的人

【讨论】：