带回调的useState钩子
带回调的useState钩子
提问于 2020-03-10 12:21:19
下面的应用程序有两个按钮，它们都改变了相同的状态，但是有不同的回调。
我的问题是，如何使用带有功能组件的钩子实现相同的结果？我看到了一些像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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-10 12:31:16
以下是你应该做的事情：
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>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60625352
复制相关文章
相似问题
微软认可的带有node/express的TypeScript入门项目没有任何类吗？
设置node.js & express项目
TypeScript与现有Node js express项目的集成
为Node/Express/类型记录和Node设置一个项目
使用typescript项目设置node.js
腾讯云开发者
