![js]( "js")
本文介绍了动作完成后执行函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，今天开始使用 Redux，因此正在构建一个非常基本的递增/递减数字项目，单击递增/递减"按钮.这是它的一个小代码！请看一看
动作创建器文件
export const increment=(num)=>{返回 {类型:'增量'，有效载荷:数量}}
减速器文件
const change=(change=0,action)=>{if(action.type==='增量'){返回 action.payload+1}退换货}导出默认的 combineReducers({改变})
Increment.js
class Increment extends Component {使成为() {控制台日志(this.props.ans)返回 (<div><button onClick={()=>{this.props.increment(this.props.ans)}}>Increment</button>
)}}const mapstatetoprops=(状态)=>{返回 {ans:state.change}}导出默认连接(mapstatetoprops，{增量})(增量)
现在我面临的问题是在 Increment.js 中点击按钮 Increment 时执行两个函数
第一个
this.props.increment(this.props.ans)//它调用动作创建器并改变状态
第二个
this.props.in(this.props.ans)//这是对父组件的回调，因为我想将值从 Increment/Decrement.js 传递给 app.js，然后将其渲染到屏幕
所以我的 App.js 看起来像
const App=(props)=>{控制台日志(道具)返回 (<div><增量/><递减/>计数:{props.ans}
);}const mapstatetoprops=(状态)=>{控制台日志(状态)返回 {ans:state.change}}导出默认连接(mapstatetoprops)(应用程序)；
现在如果我 console.log(val) 在 App.js 和 console.log(this.props.ans) 在 Increment.js 文件我发现如果我的原始值是 0 所以 Increment.js 中的 this.props.ans 给我 1 但在 App.js this.val 仍然给我 0..so 在操作更新我正在 App 中接收值的状态之前.js.如何在操作成功更新状态后运行并更新 App.js?
解决方案
你的动作的运行流程是:
this.props.increment(this.props.ands) 运行，此时this.props.ans为0this.props.in(this.props.ans) 立即运行并在您的 App.js 中打印 0 - 状态改变并重新渲染增量组件
console.log(this.props.ands)(在 render 函数中)运行.
要获得您想要的行为，您可以在 componentDidUpdate 生命周期方法中调用您的 in 回调函数.
componentDidUpdate(prevProps) {this.props.in(this.props.ans);}
Hey guys started out Redux today so was building a very basic Project of Incrementing/Decrementing the number on clicking the Increment/Decrement button.Here is a small code for it !Please have a look
Actions-creater file
export const increment=(num)=>{
return {
type:'increment',
payload:num
}
}
reducers file
const change=(change=0,action)=>{
if(action.type==='increment'){
return action.payload+1
}
return change
}
export default combineReducers({
change
})
Increment.js
class Increment extends Component {
render() {
console.log(this.props.ans)
return (
<div>
<button onClick={()=>{this.props.increment(this.props.ans)}}>Increment</button>
</div>
)
}
}
const mapstatetoprops=(state)=>{
return {ans:state.change}
}
export default connect(mapstatetoprops,{increment}) (Increment)
Now the issue I am facing is that in Increment.js on clicking the button Increment two functions get executed
First one
this.props.increment(this.props.ans)
//which calls the action creater and changes the state
Second one
this.props.in(this.props.ans)
//which is a callback to the parent component as i want to pass the value to app.js from both Increment/Decrement.js and then render it to screen
So my App.js looks like
const App=(props)=>{
console.log(props)
return (
<div>
<Increment />
<Decrement/>
Count: {props.ans}
</div>
);
}
const mapstatetoprops=(state)=>{
console.log(state)
return {ans:state.change}
}
export default connect(mapstatetoprops) (App);
Now if i console.log(val) in App.js and console.log(this.props.ans) in Increment.js filei find that if my original value is 0 so this.props.ans in Increment.js gives me 1 but in App.js this.val still gives me 0..so before the action updates the state i am receving value in App.js. How can i make that run and update App.js after action succesfully updates the state ?
解决方案
The running flow of your action is:
this.props.increment(this.props.ands) runs, at this point, this.props.ans is 0this.props.in(this.props.ans) runs right after and print 0 in your App.js- The state changed and Increment Component re-rendered
console.log(this.props.ands) (in render function) runs.
To have the behavior as you want, you can call your in callback function inside the componentDidUpdate life cycle method.
componentDidUpdate(prevProps) {
this.props.in(this.props.ans);
}
这篇关于动作完成后执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！