Question

所以我有一个按钮：

<button onClick={doSomething}>Do it</button>

我有一个功能

const doSomething = () => {
  console.log(1)
}

我希望console.log(2)在触发doSomething之后触发。

类似这样的东西：

const doSomething = () => {
  console.log(1)
  console.log(2)
}

但是此人立即触发console.log(2)。我想要的是单击按钮后在console.log(2)之后触发console.log(1)。

我需要在这里使用useEffect()吗？如果是，怎么办？

编辑：

这是问题所在。函数getQuestions()运行时，a立即触发。我希望getQuestions()完成后触发props.answerQuestion()。

   const a = (e) => {
        e.preventDefault();

        props.answerQuestion({
            question: question,
            answer: answer,
        });

        getQuestions();
    };

EDIT2：

export const answerQuestion = (answerQuestion) => (dispatch) => {
    const token = localStorage.getItem("token");
    if (token) {
        axios
            .post("http://localhost:5000/answerQuestion", answerQuestion, {
                headers: {
                    "X-Auth-Token": token,
                },
            })
            .then((res) => {
                dispatch({
                    type: ANSWER_QUESTION,
                    payload: res.data,
                });
            });
    }
};

Answer 1

在这种情况下，您不需要使用useEffect，您要做的就是等待api调用解析后再调用getQuestions。实现此目的的一种方法是：

// update answerQuestion into an async function
export const answerQuestion = async (answerQuestion) => async (dispatch) => {
    const token = localStorage.getItem("token");
    if (token) {
        const response = await axios // <--- add await here
            .post("http://localhost:5000/answerQuestion", answerQuestion, {
                headers: {
                    "X-Auth-Token": token,
                },
            })
        await dispatch({
            type: ANSWER_QUESTION,
            payload: response.data,
        });
    }
};

然后在您的组件中

   const a = async (e) => {
        e.preventDefault();

        await props.answerQuestion({
            question: question,
            answer: answer,
        });

        getQuestions();
    };

Answer 2

您可以JavaScript Promises解决此问题。在Promises函数中使用answerQuestion()将使您可以在.then()

中链接.catch()和a function

export const answerQuestion = (answerQuestion) => (dispatch) => return new Promise((resolve, reject) => {
    const token = localStorage.getItem("token");
    if (token) {
        axios
            .post("http://localhost:5000/answerQuestion", answerQuestion, {
                headers: {
                    "X-Auth-Token": token,
                },
            })
            .then((res) => {
                dispatch({
                    type: ANSWER_QUESTION,
                    payload: res.data,
                });
                resolve();
            })
            .catch((error) => {
                reject(error);
             })
    }
});

const a = (e) => {
        e.preventDefault();

        props.answerQuestion({
            question: question,
            answer: answer,
        })
        .then(() => {
            getQuestions();
         })
         .catch((error) => {
            console.log(error)
          })

        
    };

在功能组件（React，React Hooks）中触发功能后如何触发第二个功能

2 个答案: