useState 完成设置值后如何从另一个 API 获取

Question

我正在提交表单并获取 2 个 API。第一个 API 给了我一个令牌值，然后我需要它作为第二个 API 的数据。我将令牌放入const[token, setToken] = useState();。

收到令牌后，我使用setToken 来存储令牌。现在我希望这个令牌用于我的下一个 API 调用。但setToken 在第二个 API 调用中未定义。

我都这样称呼：

    axios
      .request(options)
      .then(function (response) {
        console.log(response.data.id);
        setToken(response.data.id)
      })
      .then(function(response) {
        saveCard();
      })
      .catch(function (error) {
        console.error(error);
      });

saveCard() 是我调用第二个 API 的地方，它使用我之前设置的 token。在设置令牌之前，它正在调用saveCard() 函数。令牌完全设置后如何调用saveCard()函数。

Answer 1

有几种方法可以解决这个问题，其中最简单的可能是将令牌从第一个请求传递到 saveCard 方法 -

axios
    .request(options)
    .then(function (response) {
        console.log(response.data.id);
        setToken(response.data.id)

        // This gets passed to the next function in the chain
        return response.data.id;
    })
    .then(function(token) {
        saveCard(token);
    })
    .catch(function (error) {
        console.error(error);
    });

实际上 - 您不需要将 saveCard 隔离到单独的 then 回调中 -

axios
    .request(options)
    .then(function ({ data }) {
        const token = data.id;

        setToken(token);
        saveCard(token);
    })
    .catch(function (error) {
        console.error(error);
    });

但是，如果您真的想使用来自setState 调用的令牌调用saveCard 方法，您将不得不使用useEffect。你可以这样做：

// Presuming you have something that represents your form state
const [formData, setFormData] = useState({});

const [token, setToken] = useState("");
const [submitting, setSubmitting] = useState(false);

const handleSubmit = async () => {
    if (submitting) return;

    setSubmitting(true);

    try {
        const { data } = await axios.request(options);
        setToken(data.id);

    } catch (error) {
        console.error(error);
        setSubmitting(false);
    }
};

useEffect(() => {
    // We can only call 'save' if we are in "submitting" mode, 
    // and we have a token.
    if (!(submitting && token)) return;

    saveData();

    // You'd probably have to reset your token here too presuming
    // you need to fetch another one again when you save.
    setToken("");
    setSubmitting(false);

}, [submitting, token, formData]

如您所见，这要尴尬得多；所以我想你必须问自己，你真的需要令牌作为状态吗？最干净的解决方案是完全删除它，并使用 async/await 而不是承诺：

try {
    // Get the token
    const { data } = await axios.request(options);
    const { id: token } = data;

    // Now use the token to submit the form - I'm presuming this is async too?
    await saveCard(token);

} catch (error) {
    console.error(error);
}