Javascript 通过JS从API SVG动态加载

我有一个呈现svg的模块。在此之前，模块应该检查授权，如果确定，则使用令牌通过调用从api获取文件

我有下一个密码

  function App() {
  const [tableColors, setTableColors] = useState(["gray"]);
  const [svg, setSvg] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isErrored, setIsErrored] = useState(false);
  
  
  new AuthService().getUser().then(user =>{ if(!user) {
    Login()
  }
    else{
      useEffect( async () => {
        LoadSvg()
        .then(res => res.text())
        .then(setSvg)
        .catch(setIsErrored)
        .then(() => setIsLoaded(true))
      }, [])
    }})

  return ( 
    <div className="App">
      <header className="App-header">
       <SvgLoader svgXML={svg}>
       
      </SvgLoader> 
      
      </header>
    </div>
  );
  
  function Login(){
   var a = new AuthService();
   a.login();
  }

  async function LoadSvg(){
    return await new ApiService().callApi("https://localhost:44338/api/v1/desk-booking/Plan/getroomplanbyid?roomId=1")
  }
}

函数应用程序（）{
const[tableColors，setTableColors]=useState（[“gray”]）；
const[svg，setSvg]=useState（false）；
const[isLoaded，setIsLoaded]=useState（false）；
const[isErrored，setIsErrored]=useState（false）；
新建AuthService（）.getUser（）.then（用户=>{if（！user）{
登录（）
}
否则{
useffect（异步（）=>{
LoadSvg（）
。然后（res=>res.text（））
.然后（设置VG）
.catch（设置错误）
.然后（（）=>setIsLoaded（true））
}, [])
}})
报税表（
);
函数登录（）{
var a=新的AuthService（）；
a、 登录（）；
}
异步函数LoadSvg（）{
return wait new ApiService（）.callApi（“https://localhost:44338/api/v1/desk-预订/计划/getroomplanbyid？roomId=1”）
}
}

我在这里遇到的问题是“React Hook”useffect“不能在回调中调用”，但如果不使用“useffect”，它将无休止地获取svg

---

我如何解决这个问题？

你做得不对，如果你用“反应”的方式来做，那么解决方案会是这样的

....
function App() {
  const [tableColors, setTableColors] = useState(['gray']);
  const [svg, setSvg] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isErrored, setIsErrored] = useState(false);
  // state to check if user is loaded, used for svg call
  const [userLoaded, setUserLoaded] = useState(false);

  // useEffect does not prefer async function 
  useEffect(() => {
    if (!userLoaded) {
      new AuthService().getUser().then(user => {
        if (!user) {
          Login();
          // indicate user was loaded
          // I would move the login function body here instead since, login is async, so this might not work as intended but you get the idea
          setUserLoaded(true);
        }
      });
    }
  }, [])

  useEffect(() => {
    // if userLoaded is true then go ahead with svg loading
    if (userLoaded) {
      LoadSvg()
        .then(res => res.text())
        .then(setSvg)
        .catch(setIsErrored)
        .then(() => setIsLoaded(true));

    }
    // Add svg useEffect dependency on userLoaded
  }, [userLoaded]);
......

---

注意，此解决方案旨在让您了解如何执行此操作，如果您复制粘贴代码，则可能无法执行此操作。

useffect

不应有条件地使用。看看代码，我想说您也需要将身份验证放在useffect中。