对象作为 React 子级无效（在尝试获取资源时发现：TypeError: NetworkError。）答案

【问题标题】：Objects are not valid as a React child (found: TypeError: NetworkError when attempting to fetch resource.)对象作为 React 子级无效（在尝试获取资源时发现：TypeError: NetworkError。）
【发布时间】：2021-02-11 00:40:45
【问题描述】：

我正在尝试在代码沙箱中为学校项目制作一个天气反应应用程序。一切在纸上看起来都不错，但我收到错误消息：对象作为 React 子项无效（发现：TypeError: NetworkError when trying to fetch resource.）。如果您打算渲染一组子项，请改用数组。

我正在做一个天气应用类型的项目。我的 API 在 openweather 中是正确的。错误将我指向这一点：

import {useState, useEffect} from 'react';

const UseFetch = (initialUrl) => {
  // create state variables
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(null);
  const [url, setUrl] = useState(initialUrl);

  useEffect(() => {
    if(!url) return;
    setIsLoading(true);
    // clear old search
    setData(null);
    setError(null);

    fetch(url)
        .then((response) => response.json())
        .then((data) => {

            // error handling for nonexistent data
            setIsLoading(false);
            if(data.cod >= 400) {
                setError(data.message);
                return;
            }
            setData(data);
        })
        .catch((error) => {
            setIsLoading(false);
            setError(error);
        });
  }, [url]);

  return { data, error, isLoading, setUrl };
};

export default UseFetch;

错误出现在 setError(error) 部分。我做错了什么？

这就是我所说的错误

import React from 'react';
import CitySelector from './components/CitySelector';
import './App.css';
import {Container} from 'react-bootstrap';
import UseFetch from './hooks/UseFetch';
import {API_KEY, API_BASE_URL} from './apis/config'
import WeatherList from './components/WeatherList';

const App = () => {
  const {data, error, isLoading, setUrl} = UseFetch();

  const getContent = () => {
    if(error) return <h2>Error when fetching: {error}</h2>
    if(!data && isLoading) return <h2>LOADING...</h2>
    if(!data) return null;
    return <WeatherList weathers={data.list} />
  };

  return (
    <Container className="App">
      <CitySelector onSearch={(city) => setUrl(`${API_BASE_URL}/data/2.5/forecast?q=${city}&cnt=5&appid=${API_KEY}`)} />

      {/* conditionally render  */}
      {getContent()}
    </Container>
  );
};

export default App;

【问题讨论】：

我相信你的问题是你在哪里渲染 api 数据我可以偶然看到
你可以使用setError(JSON.strigify(error))，而不是setError(error)。那应该可以解决问题。但是，正如@Robert 所说，您应该更改错误的呈现逻辑。渲染 error.message 而不仅仅是 error 可能会有所帮助。但是，您仍然应该提供渲染函数的代码以便更好地理解。
我添加了我调用错误的代码@Kiran 我做错了什么？

标签： javascript reactjs

【解决方案1】：

您在下面这一行中显示的 error 是 Object，它在 JSX 中不是有效的显示类型。

if(error) return <h2>Error when fetching: {error}</h2>

你可以做什么：

在上面的行中显示一个字符串化的错误。也就是改变它：

if(error) return <h2>Error when fetching: {JSON.stringify(error)}</h2>

但是，如果您采用这种方法，您的应用中会显示不需要的文本和堆栈跟踪。

如果存在error.message，则显示它。几乎所有的 javascript/custom 错误都具有 message 属性，其中包含用于显示错误内容的最相关信息。如果此属性不包含值，您可以显示自定义错误消息（例如：“出现问题”）。

if(error) return <h2>Error when fetching: {error.message || 'Something went wrong'}</h2>

我会建议选项 2 而不是选项 1。

【讨论】：