带回调的useState挂钩

Question

下面的应用程序有两个按钮，都更改相同的状态，但有不同的回调。

我的问题是，如何使用带有功能组件的钩子来获得相同的结果？我见过一些像useStatewithCallback这样的自定义挂钩，它与下面的基本相同

useEffect(()=>{
/*some side effect here*/
}[counter])

这种方法的问题是，useEffect只知道counter是否发生了变化，而不知道是什么改变了它。如果我这样做，那么同样的副作用也会发生(也就是同样的回调(。

我需要的是像这样的东西

useEffect(()=>{
/*if first button clicked, run first side effect*/
/*if second button clicked, run second side effect*/
}[counter])

所以我现在唯一能想到的就是给按钮添加状态，然后重写useEffects。

有没有更简单的方法？

class App extends React.Component {
constructor(props) {
super(props);
this.state = {counter: 0};
}

clickFirst = ()=>{
this.setState({counter:this.state.counter + 1},
()=>{
console.log('first button clicked')
console.log(`the counter is now ${this.state.counter}`)
})
}

clickSecond = ()=>{
this.setState({counter:this.state.counter + 1},
()=>{
console.log('second button clicked')
console.log(`the counter is now ${this.state.counter}`)
})
}

render(){
return(
<div>
<button onClick={this.clickFirst}>{this.state.counter}</button>
<button onClick={this.clickSecond}>{this.state.counter}</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

以下是您应该做的：

const App = () => {
const [ counter, setCounter ] = useState(0);
const [ buttonClicked, setButtonClicked ] = useState(null);
useEffect(
() => {
if (buttonClicked == "firstButton") {
// do some stuff
} else if (buttonClicked == "secondButton") {
// do some stuff
}
},
[ buttonClicked, counter ]
);
clickFirst = () => {
setCounter(counter + 1);
setButtonClicked("firstButton");
};
clickSecond = () => {
setCounter(counter + 1);
setButtonClicked("secondButton");
};
return (
<div>
<button onClick={clickFirst}>{counter}</button>
<button onClick={clickSecond}>{counter}</button>
</div>
);
};