类型错误：未定义不是对象（评估“data.graphics.dvd”）

Posted 2023-03-14

【中文标题】类型错误：未定义不是对象（评估“data.graphics.dvd”）

【英文标题】：TypeError: undefined is not an object (evaluating 'data.graphics.dvd')

【发布时间】：2021-03-10 22:25:08

【问题描述】：

我正在玩 react-native 并从 API 获取一些数据。都好。当我试图将数据显示到我的然后我只能显示第一个喜欢 data.artistName，但是当我尝试访问 data.graphics.dvd 我收到错误“TypeError：未定义不是对象（评估'data.graphics .dvd')"

图形是一个对象。

const Videos = () => 
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => 
    const fetchPost = async () => 
     fetch('https://myurl.com/api/title/5fac58f764e6710/')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
    
    fetchPost();
    
  , []);

    return (
  
 
    <View style=styles.wrapper>
     
    <Text style=styles.title>data.artistNamedata.graphics.dvd</Text>
      
    </View>
   )
  ;

【问题讨论】：

如果您收到该错误，那是因为图形为空，而您正试图获得空的“dvd”。您是否检查过数据是否包含“图形”？

是的，问题是如果应用程序重新加载并停留在该屏幕上，我会得到数据。但是当导航到该页面时，我不明白。

【参考方案1】：

在您的初始状态中，您将data 定义为一个空数组：

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

这意味着在第一次渲染时，data == [] 此时，当您访问data.artistName 时，其计算结果为undefined，但不会导致类型错误。

但是，当data === []，然后您尝试获取data.graphics.dvd 时，您会收到类型错误，因为graphics 未定义并且您尝试从中获取dvd。

要解决此问题，请在渲染该部分之前检查 data 是否实际包含某些内容：

(data.artistName && data.graphics) ? <Text style=styles.title>data.artistNamedata.graphics.dvd</Text> : null

处理这个问题的另一种方法（在你进入 return 语句之前）是检查 data 并在没有任何内容的情况下执行不同的 return：

if (loading) 
  return <Text>Loading...</Text>


return (<View/>) //your normal return

这一切都基于data.graphics 存在，一旦您的 API 调用返回，原始帖子的评论者提到了这一点。

【讨论】：

感谢您的回复。现在我明白了！它无法加载它返回未定义的所有数据。我对吗？与您的解决方案相得益彰！谢谢。

时间线将如下所示：1) 初始渲染 2) useEffect 运行 3) fetch 内 useEffect 返回 4) 下一次渲染。因此，在第 4 步之前，您还没有任何数据。