[英]Invalid hook call React while fetching data from an API
passing country full name at onClick event.在 onClick 事件中传递国家全名。 here is error
这是错误
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)
}
Here is Source of Code Click here to see code这是代码源点击这里查看代码
Hooks can be only used inside a Functional Component and not a normal function.挂钩只能在功能组件内部使用,而不能用于普通 function。
Seems like you are trying to call a Functional Component like normal function with an argument like below.似乎您正在尝试使用如下参数调用像普通 function 这样的功能组件。
onClick={() => Country(data.name)}
Instead what you might want to do is, show a list of buttons with country names and then when one of the button is clicked, call a handler function which is the axios API call and then show the response country details or do whatever that you want with those detail data.相反,您可能想要做的是,显示带有国家名称的按钮列表,然后当单击其中一个按钮时,调用处理程序 function 即 axios ZDB974238714CA8DE634A7CE1D083A与那些详细数据。
To do that, you need to save those responded country detail into a React state.为此,您需要将这些响应的国家/地区详细信息保存到 React state 中。 If country detail exists, show the details.
如果存在国家/地区详细信息,请显示详细信息。 If not, show the list.
如果没有,请显示列表。
So, I forked your codesandbox and edit it like this.所以,我分叉了你的代码框并像这样编辑它。
https://codesandbox.io/s/country-data-i479e?file=/src/App.jshttps://codesandbox.io/s/country-data-i479e?file=/src/App.js
Well from the error I can see that you have put the Country call inside a event handler onClick.从错误中我可以看出您已将 Country 调用放入事件处理程序 onClick 中。
The truth is that hooks can not be called inside event listeners.事实是,不能在事件侦听器内部调用钩子。 If you need to change the state inside a listener you can do that but you will need to call
useState
outside of a listener and then call setState
wherever you need.如果您需要在侦听器内更改 state,您可以这样做,但您需要在侦听器外部调用
useState
,然后在需要的地方调用setState
。
That is because React uses order in which you call hooks to remember how execute your component in subsequent calls.这是因为 React 使用你调用钩子的顺序来记住在后续调用中如何执行你的组件。
const [state, setState] = useState();
const onClick = () => {
setState(...);
} ;
As the previous answers have mentioned, you can use hooks only at functional level and not inside a handler.正如前面的答案所提到的,您只能在功能级别使用钩子,而不能在处理程序内部使用。 You just need to move your hook a level up and pass it to your function.
您只需将您的钩子向上移动一个级别并将其传递给您的 function。 Also, as you're not returning anything from the Country function, there's no need to import "React".
此外,由于您没有从国家/地区 function 返回任何东西,因此无需导入“React”。
I have modified the code: https://codesandbox.io/s/quiet-night-7cdvi我修改了代码: https://codesandbox.io/s/quiet-night-7cdvi
Check console (Added a useEffect in Country.js just for logging, you can remove it).检查控制台(在 Country.js 中添加了一个 useEffect 仅用于日志记录,您可以将其删除)。
Some changed done in your code.在您的代码中完成了一些更改。 Here is the link to view code.
这是查看代码的链接。 https://codesandbox.io/s/practical-dust-lk0x7?file=/src/country.js
https://codesandbox.io/s/practical-dust-lk0x7?file=/src/country.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.