axios 未捕获错误：渲染的钩子比上一次渲染时多,- reactjs issue

imzjd6km  于 2023-08-04  发布在  iOS
关注(0)|答案(1)|浏览(91)

我尝试使用useSwr获取主数据，并使用axios调用另一个函数，当我这样做时，我得到Uncaught Error：渲染的钩子比上一次渲染时多。我至少试了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">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;

字符串

axios

1条答案

按热度按时间
oyxsuwqo

oyxsuwqo1#

除非绝对必要，否则在组件中定义组件通常不是一个好主意。
我强烈建议将GetDetailsComponent定义移出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;
};

字符串
您也不能像常规函数那样调用组件。它们必须用作JSX组件

<GetDetailsComponent scrip_cd={i.scrip_cd} />

型

赞(0）分享  回复(0）举报  2023-08-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com