7

我正在使用 useEffect 钩子从天气 api 获取数据并正确声明依赖关系。我的状态仍未更新，因此我的渲染函数出现错误。从摆脱依赖数组到在依赖数组中声明倍数，我几乎尝试了一切。我不知道我的功能有什么问题。API 的 JSON 响应格式如下：

{
 location: {
 name: "Paris",
 region: "Ile-de-France",
 },
 current: {
  last_updated_epoch: 1564279222,
  last_updated: "2019-07-28 04:00",
  temp_c: 16,
  temp_f: 60.8,
  is_day: 0,
  condition: {
    text: "Clear",
    icon: "//cdn.apixu.com/weather/64x64/night/113.png",
    code: 1000
  },
  wind_mph: 6.9,
  wind_kph: 11.2
 }
}

这就是我的代码的样子：

const Weather = ({ capital }) => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    console.log("useEffect called");
    const getWeather = async () => {
      try {
        const res = await axios.get(
          `http://api.apixu.com/v1/current.json?key=53d601eb03d1412c9c004840192807&q=${capital}`
        );
        setWeather(res.data);
      } catch (e) {
        console.log(e);
      }
    };
    getWeather();
  }, [capital]);
  console.log(weather);

  return (
    <Card style={{ width: "18rem", marginTop: "25px" }}>
      <Card.Img variant="top" src={weather.current.condition.icon} />

      <Card.Header style={{ textAlign: "center", fontSize: "25px" }}>
        Weather in {capital}
      </Card.Header>
    </Card>
  )
}

我希望能够显示图标的图像，但我在渲染函数中收到此错误消息：

TypeError: Cannot read property 'current' of null
Weather
src/components/Weather.js:26
  23 | 
  24 | return (
  25 |   <Card style={{ width: "18rem", marginTop: "25px" }}>
  26 |     <Card.Img variant="top" src={weather.current.condition.icon} />
     | ^  27 | 
  28 |     <Card.Header style={{ textAlign: "center", fontSize: "25px" }}>
  29 |       Weather in {capital}

我console.log(weather)返回 null，即使它在 useEffect() 之后被调用并且console.log(useEffect called)根本没有记录，这意味着 useEffect 没有被调用。

4

3 回答 3

16

错误消息泄露了它，Cannot read property 'current' of null唯一被调用的地方current是在weather.currentofsrc中Card.Img，所以我们推断那weather是null在渲染期间。

发生这种情况的原因是因为 api 调用是异步的，它不会立即填充状态，所以渲染首先发生并尝试.current从初始天气状态读取null。

解决方案：在您的render方法中，确保不要读取weather.currentwhile weatheris null。

例如，您可以在{weather && <Card>...</Card}加载数据之前隐藏整个卡片并显示加载指示器，或者您可以将src={weather && weather.current.condition.icon}其用作快速解决方法。

const Weather = ({capital}) => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    console.log("useEffect called");
    const getWeather = async () => {
      try {
        const res = await axios.get(
          `http://api.apixu.com/v1/current.json?key=53d601eb03d1412c9c004840192807&q=${capital}`,
        );
        setWeather(res.data);
      } catch (e) {
        console.log(e);
      }
    };
    getWeather();
  }, [capital]);
  console.log(weather);

  return (
    <Card style={{width: "18rem", marginTop: "25px"}}>
      <Card.Img variant="top" src={weather && weather.current.condition.icon} />

      <Card.Header style={{textAlign: "center", fontSize: "25px"}}>
        Weather in {capital}
      </Card.Header>
    </Card>
  );
};
于 2019-07-30T02:28:20.137 回答
2

所以，我面临着一个类似的问题，似乎useEffect钩子根本没有被调用。相关代码片段如下：

在我的功能组件中，这是代码出现的顺序：

  • 一个变量const facetFields = [];声明，它应该由useEffect钩子内的 AJAX 调用设置

  • useEffect使用 AJAX 设置上述变量的钩子。

     useEffect( ()=>{
      console.log('FacetTreeView: useEffect entered');
      facetFields = getFacetFieldNames(props.tabIndex);   
   }, []);

  • 使用该变量的 JSX 代码。

    return (<MyComponent> { facetFields.map((facetLabel, index) => { populateFacetInstances(facetLabel) }) } </Component>)

使用此代码，钩子内的控制台语句根本不会打印。map此外，在设置 facetFields时，我不断收到未定义的错误。因此，事实证明 useHook 在组件渲染后被调用。所以，在渲染过程中，变量facetFields是undefined.所以，我通过将这一行添加到我的 JSX 渲染代码部分来解决这个问题：

facetFields && facetFields.map(.....

有一次，我进行了上述更改，控件开始进入钩子。所以，总而言之，如果 JSX 中有任何代码是从useEffect钩子设置的，那么最好将 JSX 的执行推迟到钩子执行完成. 虽然，这不是强制性的，但它会使 JSX 代码更易于阅读。这可以通过使用布尔状态标志以简单的方式实现。

  1. 定义状态：

const [readyForRender, setReadyForRender] = React.useState(false); 2. 在钩子中设置状态。

useEffect( ()=>{
            console.log('FacetTreeView: useEffect entered');
            facetFields = getFacetFieldNames(props.tabIndex);
            setReadyForRender(true); }, []);
  1. 有条件地渲染 JSX。

if(readyForRender){ return ( { facetFields.map((facetLabel, index) => { populateFacetInstances(facetLabel) }) } ); } 其他{ 返回​​空值；}

于 2020-10-01T18:02:09.377 回答
1

我曾经遇到过同样令人费解的问题

当在父代码中创建组件时，您可以尝试在组件上添加一个 key prop

<yourcomponent key="some_unique_value" />

这是因为在大多数情况下，当您的组件被重用时，根据它的创建方式，它通常可能会重新渲染它并进行一些更改，而不是在您重用它时再次创建它，因此useEffect不会调用 。例如在 SwitchRoute、循环、条件...

因此，添加密钥将防止这种情况发生。如果它在循环中，则需要确保每个元素都是唯一的，i如果找不到更好的唯一键，可以通过在键中包含索引。

于 2021-07-07T16:23:33.820 回答