英文:
Uncaught Error: Rendered more hooks than during the previous render. - reactjs issue
问题
我正在尝试使用useSwr获取主要数据，并使用axios调用另一个函数，但这样做会导致出现Uncaught Error: Rendered more hooks than during the previous render错误。我至少尝试了1000次。如果你认为这个问题很愚蠢，请忽略它，因为我是新手。我的代码如下，我正在获取主要数据，并尝试使用主要数据获取另一个函数，即{GetDetailsComponent(i.scrip_cd)}，我的朋友出现了错误。
import React, { useState, useEffect } from "react";
import "../index.css";
import useSWR from "swr";
import Popup from "reactjs-popup";
import axios from "axios";
const Winner = () => {
const [title, setTitle] = useState("");
const GetDetailsComponent = (scrip_cd) => {
useEffect(() => {
axios
.get(
`https://bse-api-server.vercel.app/getDetails?scripcode=${scrip_cd}`
)
.then((res) => setTitle(res.data.PBpcUC))
.catch((err) => console.log(err));
}, [scrip_cd]);
return title.toString() === "5" ? "hidden" : title.toString();
};
const fetcher = (...args) => fetch(...args).then((res) => res.json());
const { data, error, isLoading } = useSWR(
"https://bse-api-server.vercel.app/",
fetcher
);
if (error) return <div>failed to load</div>;
if (isLoading) return <div>loading...</div>;
return (
<div>
<center>
<div className="">You're filtering only High Volume.</div>
</center>
<table className="mt-4 table w-full p-4">
<thead
style={{
background: "linear-gradient(270deg,#20bf55,#01baef)",
position: "sticky",
top: 0,
color: "#fff",
}}
>
<tr>
{" "}
<th className={`border border-black`}>S.no</th>
<th className="border border-black ">Name</th>
<th className="border border-black ">Company Name</th>
<th className="border border-black ">LTP</th>
<th className="border border-black ">Now %</th>
<th className="border border-black ">Tr.v</th>
<th className="border border-black ">Z</th>
<th className="border border-black ">M.C</th>
<th className="border border-black ">N</th>
<th className="border border-black ">C.I</th>
<th className="border border-black ">SC</th>
<th className="border border-black ">Volume</th>
<th className="border border-black ">Max U.C</th>
</tr>
</thead>
{data.Table.sort((a, b) => (a.trd_vol < b.trd_vol ? 1 : -1)).map(
(i, index) => {
const hello = GetDetailsComponent(i.scrip_cd);
return (
<tbody key={index}>
<tr className={`border border-black`}>
<td className="border border-black "> {index + 1}</td>
<td className="underline text-blue-500">
<a href={i.NSUrl} target="_blank" rel="noopener noreferrer">
{i.scripname}
</a>
</td>
<td className="border border-black p-2 ">
{i.LONG_NAME.split(" - ")[0]
.replaceAll("Ltd", "limited")
.replaceAll("LTD", "limited")
.replaceAll(".", " ")
.replaceAll("-$", " ")
.replaceAll("{", "")
.replaceAll("}", "")
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("&", "and")}
</td>
<td className="border border-black ">
<span className="font-extrabold text-md text-green-700">
{i.ltradert.toString().split(".")[0]}
</span>
<span className=" text-xs">
{i.ltradert.toString().split(".")[1] === undefined
? ".00"
: "." + i.ltradert.toString().split(".")[1]}
</span>
</td>
<td className="border border-black p-2">{i.change_percent}</td>
<td className="border border-black ">
<Popup
trigger={
<button className="bg-purple-500 p-1 rounded-md text-white">
{" "}
Tr.v
</button>
}
position="right center"
>
<a
href={`https://in.tradingview.com/chart/qmDo3C1P/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">Konidoni</div>
</a>{" "}
<hr />
<a
href={`https://in.tradingview.com/chart/VViXq6AO/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">Balaanand</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/1gQFO9Ge/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">Mvsrcm</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/3QIPa6zQ/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">alaknanda</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/GYpMww4j/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">shivonica9</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/fPuBRHoA/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">vwuxi0j</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/Ls1Vc76A/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">tx
<details>
<summary>英文:</summary>
I'm trying to fetch main data using useSwr and I'm calling another function with axios and when I do that I'm getting Uncaught Error: Rendered more hooks than during the previous render. I tried 1000 times at least. please ignore this question if you think this is stupid, coz I'm newbie. my code: here, i am fetching the main data and i tried to fetch another function using the main data which is `{GetDetailsComponent(i.scrip_cd)}` and my friend error has came
import React, { useState, useEffect } from "react";
import "../index.css";
import useSWR from "swr";
import Popup from "reactjs-popup";
import axios from "axios";
const Winner = () => {
const [title, setTitle] = useState("");
const GetDetailsComponent = (scrip_cd) => {
useEffect(() => {
axios
.get(
`https://bse-api-server.vercel.app/getDetails?scripcode=${scrip_cd}`
)
.then((res) => setTitle(res.data.PBpcUC))
.catch((err) => console.log(err));
}, [scrip_cd]);
return title.toString() === "5" ? "hidden" : title.toString();
};
const fetcher = (...args) => fetch(...args).then((res) => res.json());
const { data, error, isLoading } = useSWR(
"https://bse-api-server.vercel.app/",
fetcher
);
if (error) return <div>failed to load</div>;
if (isLoading) return <div>loading...</div>;
return (
<div>
<center>
<div className="">You're filtering only High Volume.</div>
</center>
<table className="mt-4 table w-full p-4">
<thead
style={{
background: "linear-gradient(270deg,#20bf55,#01baef)",
position: "sticky",
top: 0,
color: "#fff",
}}
>
<tr>
{" "}
<th className={`border border-black `}>S.no</th>
<th className="border border-black ">Name</th>
<th className="border border-black ">Company Name</th>
<th className="border border-black ">LTP</th>
<th className="border border-black ">Now %</th>
<th className="border border-black ">Tr.v</th>
<th className="border border-black ">Z</th>
<th className="border border-black ">M.C</th>
<th className="border border-black ">N</th>
<th className="border border-black ">C.I</th>
<th className="border border-black ">SC</th>
<th className="border border-black ">Volume</th>
<th className="border border-black ">Max U.C</th>
</tr>
</thead>
{data.Table.sort((a, b) => (a.trd_vol < b.trd_vol ? 1 : -1)).map(
(i, index) => {
const hello = GetDetailsComponent(i.scrip_cd);
return (
<tbody key={index}>
<tr className={`border border-black`}>
<td className="border border-black "> {index + 1}</td>
<td className="underline text-blue-500">
<a href={i.NSUrl} target="_blank" rel="noopener noreferrer">
{i.scripname}
</a>
</td>
<td className="border border-black p-2 ">
{i.LONG_NAME.split(" - ")[0]
.replaceAll("Ltd", "limited")
.replaceAll("LTD", "limited")
.replaceAll(".", " ")
.replaceAll("-$", " ")
.replaceAll("{", "")
.replaceAll("}", "")
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("&", "and")}
</td>
<td className="border border-black ">
<span className="font-extrabold text-md text-green-700">
{i.ltradert.toString().split(".")[0]}
</span>
<span className=" text-xs">
{i.ltradert.toString().split(".")[1] === undefined
? ".00"
: "." + i.ltradert.toString().split(".")[1]}
</span>
</td>
<td className="border border-black p-2">
{i.change_percent}
</td>
<td className="border border-black ">
<Popup
trigger={
<button className="bg-purple-500 p-1 rounded-md text-white">
{" "}
Tr.v
</button>
}
position="right center"
>
<a
href={`https://in.tradingview.com/chart/qmDo3C1P/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">Konidoni</div>
</a>{" "}
<hr />
<a
href={`https://in.tradingview.com/chart/VViXq6AO/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">Balaanand</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/1gQFO9Ge/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">Mvsrcm</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/3QIPa6zQ/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">alaknanda</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/GYpMww4j/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">shivonica9</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/fPuBRHoA/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">vwuxi0j</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/Ls1Vc76A/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">txqm0ga</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/yenE16ib/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">s3uqog1</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/BxyKps7d/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">ke1a6e9</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/ZhZee2zq/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">hztm13v</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/ZhZee2zq/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">ZuViBDG7</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/r37zOlcQ/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">bwbkdkm</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/yvElZCzr/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">ajutam4</div>
</a>
<hr />
<a
href={`https://in.tradingview.com/chart/75frF6LZ/?symbol=BSE%3A${i.scripname}`}
target="_blank"
rel="noopener noreferrer"
>
<div className=" text-black">agbifw1</div>
</a>
<hr />
</Popup>{" "}
</td>{" "}
<td className="border border-black p-2 underline text-blue-500">
{" "}
<a
href={`https://www.google.com/search?q=zauba+${i.LONG_NAME.split(
" - "
)[0]
.replaceAll("Ltd", "limited")
.replaceAll("LTD", "limited")
.replaceAll(".", " ")
.replaceAll("-$", " ")
.replaceAll("{", "")
.replaceAll("}", "")
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("&", "and")}`}
target="_blank"
rel="noopener noreferrer"
>
Z
</a>
</td>
<td className="border border-black p-2 underline text-blue-500">
{" "}
<a
href={`https://www.google.com/search?q=moneycontrol+${i.LONG_NAME.split(
" - "
)[0]
.replaceAll("Ltd", "limited")
.replaceAll("LTD", "limited")
.replaceAll(".", " ")
.replaceAll("-$", " ")
.replaceAll("{", "")
.replaceAll("}", "")
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("&", "and")}`}
target="_blank"
rel="noopener noreferrer"
>
M.C
</a>
</td>
<td className="border border-black p-2 underline text-blue-500">
<a
href={`https://advancedastra.onrender.com/${i.LONG_NAME.split(
" - "
)[0]
.replaceAll("Ltd", "limited")
.replaceAll("LTD", "limited")
.replaceAll(".", " ")
.replaceAll("-$", " ")
.replaceAll("{", "")
.replaceAll("}", "")
.replaceAll("(", "")
.replaceAll(")", "")
.replaceAll("&", "and")}`}
target="_blank"
rel="noopener noreferrer"
>
N
</a>
</td>
<td className="border border-black p-2 underline text-blue-500">
<a
href={`https://chartink.com/stocks/${i.scrip_cd}.html`}
target="_blank"
rel="noopener noreferrer"
>
C.I
</a>
</td>
<td className="border border-black p-2 underline text-blue-500">
<a
href={`https://www.screener.in/company/${i.scrip_cd}/`}
target="_blank"
rel="noopener noreferrer"
>
SC
</a>
</td>
<td className="border border-black p-2">{i.trd_vol}</td>
<td className="border border-black p-2 font-bold">
{/* <GetDetailsComponent scrip_cd={i.scrip_cd} /> */}
{GetDetailsComponent(i.scrip_cd)}
</td>
</tr>
</tbody>
);
}
)}
</table>
</div>
);
};
export default Winner;
</details>
# 答案1
**得分**: 1
不建议在组件内部定义组件，除非绝对必要。
强烈建议将`GetDetailsComponent`的定义移到`Winner`之外。
```lang-js
// 也可以将这部分移到自己的可测试定义中
const getDetails = async (scripcode) =>
(
await axios.get("https://bse-api-server.vercel.app/getDetails", {
params: { scripcode },
})
).data.PBpcUC;
// 注意解构props
const GetDetailsComponent = ({ scrip_cd }) => {
const [title, setTitle] = useState("");
useEffect(() => {
getDetails(scrip_cd).then(setTitle).catch(console.error);
}, [scrip_cd]);
return title === "5" ? "hidden" : title;
};
您也不能像普通函数一样调用组件。它们必须用作JSX组件
<GetDetailsComponent scrip_cd={i.scrip_cd} />
英文:
It's not usually a good idea to define components within components unless absolutely necessary.
I would strongly suggest moving the GetDetailsComponent definition out of Winner.
// can move this to its own, testable definition too
const getDetails = async (scripcode) =>
(
await axios.get("https://bse-api-server.vercel.app/getDetails", {
params: { scripcode },
})
).data.PBpcUC;
// note the props destructuring
const GetDetailsComponent = ({ scrip_cd }) => {
const [title, setTitle] = useState("");
useEffect(() => {
getDetails(scrip_cd).then(setTitle).catch(console.error);
}, [scrip_cd]);
return title === "5" ? "hidden" : title;
};
You also cannot call components like a regular function. They must be used as a JSX component
<GetDetailsComponent scrip_cd={i.scrip_cd} />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论