为什么我的 React 功能组件多次返回？我需要它只运行一次答案

【问题标题】：Why is my React functional component returning several times? I need it to run only once为什么我的 React 功能组件多次返回？我需要它只运行一次
【发布时间】：2021-01-26 00:00:45
【问题描述】：

我正在从客户端向服务器发出请求，以在用户登录时验证用户。从请求中，我将更新 'UserContext' 上下文提供程序上的 5 条状态（使用 useContext 挂钩）。

我下面的代码可以到达端点，并且数据返回正常。我需要该函数总共运行 1 次，并在返回响应后单独更新每个上下文状态。但是，该函数总共运行了 6 次，每次都会记录不同的结果，因为该函数会处理要更新的每一行。

第一次，它记录每个状态的单独初始值。然后它再次运行并更新 fName，然后第三次更新 fName + lName，然后第四次更新 fName + lName + email，依此类推......直到它运行 6 次，最后一个是正确的输出我需要的。

const CheckUser = async () => {

 const {
    validUser, setValidUser,
    fName, setFName,
    lName, setLName,
    email, setEmail,
    companyName, setCompanyName
    } = useContext(UserContext);

 try {
    let userData = await axios
      .post(
        `${serverURL}/checkuser`,
        { someData: 1 },

        {
          withCredentials: true,
          credentials: 'include',
        }
      )
      .then((response) => {
        setFName(response.data.fName);
        setLName(response.data.lName);
        setEmail(response.data.email);
        setCompanyName(response.data.companyName);
        setValidUser(response.data.validUser);

        //   return response.data;
      });
  } catch (e) {
    throw new Error('Erroring out');
  }

  console.log(fName, lName, email, companyName, validUser);
};
  
export default CheckUser;

为什么要这样做，而不是根据代码底部的 console.log 只做一次？以及如何使它只运行一次。我认为我在这里做的事情显然是错误的，但我似乎无法在这里找到任何答案。

另一个组件依赖 validUser 为 true 以避免被重定向到登录页面，但是当我使用此函数时，因为它的初始 validUser 为 false/未定义，在最终变为 true 之前，它将它们发送到标志-in page - 尽管登录正常。

任何帮助将不胜感激和承认。谢谢。

【问题讨论】：

标签： javascript reactjs http axios fetch

【解决方案1】：

在功能组件中使用useEffect Hook。

就像componentDidMount、componentDidUpdate和componentWillUnmount组合在一起。

当从 api 获取数据并且 api 只渲染一次时使用它

useEffect(() => {
  axios.post(`${serverURL}/checkuser`,
  { someData: 1 },

  {
    withCredentials: true,
    credentials: 'include',
  })
  .then(response => {
      if (response.data.success) {
          setFName(response.data.fName);
          setLName(response.data.lName);
          setEmail(response.data.email);
          setCompanyName(response.data.companyName);
          setValidUser(response.data.validUser);
      } else {
          alert('Failed to get data')
      }
  })

【讨论】：

谢谢，这是有道理的，我明白为什么应该这样做。但是，由于某种原因，它现在无法读取 - 正在调用警报。我不知道这是否与 API 请求本身有关。
此外，我已经意识到数据是成功的，因为我可以在响应中直接记录数据。但是，此数据拒绝保存到上下文的状态中。

【解决方案2】：

因为您函数中的每个APIcall 都会更新状态，从而导致re-render 一次又一次地调用您的API。

将您的 API 调用放入 useEffect

React.useEffect(() => {
    // your api call here.
}, [])

这样做可以确保 API 调用只运行一次。

【讨论】：