时间戳

首页 > 解决方案 > 如何在 react.js 的回调中调用 UseState 钩子的状态更新器函数

reactjs - 如何在 react.js 的回调中调用 UseState 钩子的状态更新器函数

问题描述

我有这段代码，在我完成 http 请求后，我正在调用状态更新器函数，即，setUserName我从异步函数获得响应。但是我看到它UsernameGenerator()就像在无限循环中一样被反复调用。我认为这里发生了某种重复渲染，因为我在代码中使用了 UserName 作为输入的值。

我想要的是将 res 设置initial value为状态变量的值，并且在设置一次值之后UsernameGenerator()永远不应再次调用。

这是我的代码片段

import { useState } from "react";
import axios from "axios";
const SignUp = () => {
const [UserName, setUserName] = useState("");
const usernameGenerator = async () => {
    let username = await axios.get("https://localhost:5000/GenerateUserName");
    return username.data.username;
  };
  usernameGenerator().then((res) => {
    setUserName(res);
    return res;
  }).catch ((err)=>{
    if(err) throw err;
  });
  return (
  <Input
     color="secondary"
     id="UserName"
     type="text"
     aria-describedby="User-Name"
     value={UserName}
     onChange={(e) => setUserName(e.target.value)}
     className={classes.input}
 />
  );
 }
 export default SignUp;

如何避免这种类似条件的无限循环res，并将状态变量作为我的初始值。

标签： reactjsaxiosreact-hooksreact-state

解决方案

您需要在 useEffect 挂钩中进行调用，例如-

import { useEffect } from "react";


useEffect(() => {
    usernameGenerator().then((res) => {
       setUserName(res);

    }).catch ((err)=>{
        // handle error here, instead of throwing
    });
}, []); // here you need to pass empty array as second parameter of useEffect to call it once

说明：您想要的是在组件挂载上调用 API，因此通过使用 useEffect 和依赖数组为空，您可以实现此目的。

目前，您在每次渲染时调用它，然后在回调中更新导致无限循环的状态

推荐阅读