开发者问题收集

从 API 获取数据时，React 的钩子调用无效

2021-05-10
269
javascript reactjs react-hooks

在 onClick 事件中传递国家全名。 这里是错误 

import React,{useState,useEffect} from 'react'; //
import axios from 'axios';

export const Country = (name) => {

  const [country, setCountry] = useState([]);
    const requestCountry = (name) => {
      axios(`https://restcountries.eu/rest/v2/name/${name}?fullText=true`)
      .then((res) => 
          // Success handling
          setCountry(res.data))
      .catch((error) => {
          // Error handling
          console.error(error.message);
      }); 
    }

    requestCountry(name)
}

这里是代码源代码 单击此处查看代码

3个回答

Hooks 只能在功能组件内部使用，而不能在普通函数中使用。

似乎您正在尝试使用如下参数调用像普通函数一样的功能组件。 

onClick={() => Country(data.name)}

相反，您可能想要做的是，显示一个带有国家名称的按钮列表，然后当单击其中一个按钮时，调用处理程序函数（即 axios API 调用），然后显示响应国家/地区详细信息或使用这些详细数据执行任何您想要的操作。

要做到这一点，您需要将这些响应的国家/地区详细信息保存到 React 状态中。 如果国家/地区详细信息存在，则显示详细信息。如果没有，则显示列表。

所以，我分叉了你的 codesandbox 并像这样编辑它。

https://codesandbox.io/s/country-data-i479e?file=/src/App.js

Kevin Moe Myint Myat
2021-05-10

好吧，从错误中我可以看到，您已将 Country 调用放在事件处理程序 onClick 中。

事实是，钩子不能在事件侦听器内调用。如果您需要更改侦听器内的状态，您可以这样做，但您需要在侦听器外部调用 useState ，然后在需要的地方调用 setState 。

这是因为 React 使用您调用钩子的顺序来记住如何在后续调用中执行您的组件。 

const [state, setState] = useState();

const onClick = () => {
     setState(...);
 } ;
Ayzrian
2021-05-10

正如前面的答案所提到的，您只能在功能级别使用钩子，而不能在处理程序内部使用。 您只需将钩子上移一级并将其传递给您的函数即可。 此外，由于您没有从 Country 函数返回任何内容，因此无需导入“React”。

我修改了代码： https://codesandbox.io/s/quiet-night-7cdvi

检查控制台（在 Country.js 中添加了一个 useEffect 仅用于记录，您可以将其删除）。

Lakshya
2021-05-10