如何运行函数同步在一个点击在反应?

Question

我在我的项目中使用ReacJs和Redux，并且有一种情况，我只需要单击一次，函数必须一步一步地运行2个内部函数。第二个函数不能在结束func2之前运行。我怎么能只在mainfunc()上点击一下这个函数?需要一个示例代码请。

func1()
func2()
mainfunc(){
func1()
func2()
}

Answer 1

所以你在React中有很多选择来实现一个目标，没有一种方法来做某事。

这里有几个例子:

1. 使用异步事件(API调用，承诺等)

// async 
export const MyComponent = () => {
const eventOne = async () => {
return new Promise((resolve, reject) => {
resolve(true);
})
}
const eventTwo = async () => {
return new Promise((resolve, reject) => {
resolve(true);
})
}
const handleClick = async () => {
await eventOne();
await eventTwo();
}
return (
<button onClick={handleClick}>
Click me
</button>
)
};

所以这里我们只是取两个异步事件并等待每个事件完成，然后使用async/await转移到下一个。

另一种方法可能是利用状态，在这种情况下，您可以这样做:

import { useState, useEffect } from 'react';
// state 
export const MyComponent = () => {
const [eventOneHasHappened, setEventOneHasHappened] = useState(false);
const triggerEventOne = () => {
// do something
setEventOneHasHappened(true);
}
const triggerEventTwo = () => {
// do something
}
useEffect(() => {
if (eventOneHasHappened) {
triggerEventTwo();
}
}, [eventOneHasHappened]);
const handleClick = () => {
triggerEventOne();
}
return (
<button onClick={handleClick}>
Click me
</button>
)
};

有很多方法可以做到这一点，这取决于你是否使用async，但试着习惯React钩子，它们非常有用