获取后 React 无法设置状态

Question

我有一个组件，我想在成功获取后呈现一些数据，但即使在成功获取后 SetState 也无法工作。即使 'console.log(response.data)' 显示了正确的对象，但为什么它下面的 'setGroupData(response.data)' 行不会改变状态？而是返回一个空对象。

这是代码：

const GroupContent = ({ groupContent, changeGroupTitle }) => {
  const groupId = window.location.href.split(
    "http://localhost:3001/groups/"
  )[1];
  const [groupData, setGroupData] = useState({});
  let token = "";

  const getGroupData = async () => {
    token = await localStorage.getItem("token");

    if (token) {
      try {
        const auth = `Bearer ${token}`;
        // console.log(auth);
        const response = await axios.get(`/api/groups/${groupId}`, {
          headers: {
            Authorization: auth,
          },
        });
        console.log(response.data);
        setGroupData(response.data);
        console.log(groupData);
        changeGroupTitle(groupData.title);
      } catch (err) {
        console.log(err.response);
      }
    }
  };

  useEffect(() => {
    getGroupData();
  }, []);

Answer 1

setState 工作正常，但更新本质上是异步的。你可以在这里做几件事

将setGroupData(response.data)转换为setGroupData(() => ({...response.data}})
在依赖数组中使用 useEffect 和 groupData 来监听状态变化。

如果我是你，我会更改其他一些内容：

本地存储或会话存储操作不是异步的。我会在 localStorage 操作之前删除 await
我会将函数 getGroupData 重命名为其他更容易混淆的名称，例如。 fetchGroupData

但这些是我的个人喜好，前两个指针会起作用

获取后 React 无法设置状态

React Can Not SetState After Fetch

setstate

reactjs

react-hooks

use-effect

use-state