在 useEffect 中访问更新后的状态不起作用

Question

我需要在 useEffect 调用中获取两个 API 端点，其中第二个调用使用第一个调用的结果。

所以目前我有：

const [steamID, setSteamID] = React.useState<string>();
const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    setLoading(true);
    getLoggedInUser()
      .then((userObj) => userObj?.steamID)
      .then((fetchedSteamId) => {
        setSteamID(fetchedSteamId);
        console.log("steamID1: " + steamID);
        console.log("steamID2: " + fetchedSteamId);
      }).then(
         // second API-Call which needs steamID
         // by either using steamID(state) or fetchedSteamId(result)
      )
      .catch((err) => {
        setLoading(true);
      });
}, []);

我试图在访问 steamID 状态的 .catch() 之前附加另一个 .then()。但是已经有了提供的代码，我有以下输出：

steamID: undefined
steamID: 1234567891011

因此，当在 useEffect 内更新我的状态 steamID 时，在 useEffect 内访问时它将是未定义的，除非我使用热重载进行任何更改。第二个输出总是正确的。

我当然可以将结果向下传递，但这是正确的方法吗？我如何确保在 useEffect 之后，我的状态包含正确的值？

Answer 1

您始终可以将 fetchedSteamId 传递给承诺链中的下一个 then 并以您需要的任何方式使用它：

const [steamID, setSteamID] = React.useState<string>();
const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    setLoading(true);
    getLoggedInUser()
      .then((userObj) => userObj?.steamID)
      .then((fetchedSteamId) => {
        setSteamID(fetchedSteamId);
        console.log("steamID1: " + steamID);
        console.log("steamID2: " + fetchedSteamId);
        return fetchedSteamId;
      }).then((fetchedSteamId) => {
        // use the id
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
}, []);

如果目标是设置该 ID 并在另一个操作中使用该 ID，则它可以工作。否则，您可以使用另一个 useEffect，将 steamId 作为依赖项：

useEffect(() => {
    setLoading(true);
    getLoggedInUser()
      .then((userObj) => userObj?.steamID)
      .then((fetchedSteamId) => {
        setSteamID(fetchedSteamId);
        setLoading(false);
      }).catch(err => setLoading(false));
}, []);

useEffect(() => {
  // do some operation when steamId useState value changes
}, [steamId]);

在 useEffect 中访问更新后的状态不起作用

Accessing the updated state in useEffect doesn't work

typescript

react-native

react-hooks

use-effect