提取后无法设置反应

Question

我有一个组件，在成功获取后，我想渲染一些数据，但是即使成功获取后，SetState也无法正常工作。即使是“ console.log（wendesp.data）”也显示了正确的对象，但是为什么“ setGroupData（wendesp.data）”行上方的“ setGroupData（wendesp.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工作正常，但是更新本质上是异步的。您可以在此处做几件事

1. convert setGroupData（response.data） to setGroupData（（（）=＆gt;（{... {... response.data}}）>

2. 使用使用 groupData 在依赖性数组中。

如果我是您，我会更改的其他一些事情：

• 本地存储或会话存储操作不是异步的。我将在LocalStorage操作之前删除等待的等待，
• 我将功能getGroupData重命名为其他令人困惑的东西，例如。 fetchgroupdata ，

但这是我的个人喜好，前两个指针将有效