Question

我在组件中调用状态函数，该函数应更改状态（并且确实要延迟，但要延迟），我要记录更改，但日志会在状态更改之前触发这是处于状态的功能：

const login = async (user, password) => {
    const body = {
      username: user,
      password: password,
    };
    await axios
      .post('/sessions', body, {
        headers: { 'Content-Type': 'application/json' },
      })
      .then((resp) => {
        dispatch({ type: LOGIN, payload: resp.data.data });
      })
      .catch((err) => {
        console.log(err.response.data);
      });
  };

这是组件中的调用

  const onSubmit = (e) => {
    e.preventDefault();
    login(user, password);
    console.log(credes);
  };

“ credes”是该响应的状态，但它会一直打印初始状态，女巫是一个空对象该功能会触发表单提交，但先记录日志，然后再更新状态。

Answer 1

正如bubulledu93，ronakvp和coreyward所指出的那样，我正在屠宰语法。我试图在一个函数中执行两个动作，所以我将日志移到useEffect中，以监视“ credes”中的更改，希望是正确的方法，但可以按需工作。

  const login = (user, password) => {
    const body = {
      username: user,
      password: password,
    };
    axios
      .post('/sessions', body, {
        headers: { 'Content-Type': 'application/json' },
      })
      .then((resp) => {
        dispatch({ type: LOGIN, payload: resp.data });
      })
      .catch((err) => {
        console.log(err.response.data);
      });
  };

以及组件中的调用+ useEffect

  const onSubmit = (e) => {
    e.preventDefault();
    login(user, password);
  };

  useEffect(() => {
    if (credes.success) {
      console.log(credes.data);
    }
  }, [credes]);

Answer 2

将await用作函数中的最后一个调用没有任何好处。不用使用async和await，只需将以axios.post()开头的Promise链返回到onSubmit，然后在其上链接（或在那里使用await）： / p>

  const login = (user, password) => {
    const body = {
      username: user,
      password: password,
    };
    return axios
      .post('/sessions', body, {
        headers: { 'Content-Type': 'application/json' },
      })
      .then((resp) => {
        dispatch({ type: LOGIN, payload: resp.data.data });
      })
      .catch((err) => {
        console.log(err.response.data);
      });
  };

  // Option 1:
  const onSubmit = (e) => {
    e.preventDefault();
    login(user, password)
      .then(() => {
        console.log(credes);
      });
  };

  // Option 2:
  const onSubmit = async (e) => {
    e.preventDefault();
    await login(user, password);
    console.log(credes)
  }

从状态调用异步功能未等待（反应）

2 个答案: