Question

我是第一次玩带钩子的游戏。在我的组件中，我请求useEffect内的某些数据，然后希望将该数据保存到本地状态。我尝试在setUser内使用useEffect，但是状态永远不会更新。我没有第二个参数[]尝试过，但是遇到了无限循环。我知道setState是异步的，以前您可以指定一个函数作为setState的第二个参数，该函数将在状态更新后运行。

我想知道在useEffect内更新状态的正确过程是什么

import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';

import { db } from '../../constants/firebase';

function Profile(props) {
  const [ user, setUser ] = useState(null);
  const { username } = props.match.params;

  useEffect(() => {
    db.collection("users").where("username", "==", username)
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          console.log(doc.data()); // data comes back fine
          setUser(doc.data());
          console.log(user); // user is still null
        });
      })
      .catch((error) => {
        console.log("Error getting user: ", error);
      });
  }, [username])

  return <div>Profile</div>
}

export default withRouter(Profile);

Answer 1

您可以使用另一个useEffect，它将在user更新时运行。

useEffect(() => {
  console.log(user);
  ... 
}, [user]);

Answer 2

尝试将useEffect的第二个参数从[username]更改为[props.match.params.username]

在useEffect中更新组件状态

2 个答案: