我正在从一个组件调度一个动作,看起来一切都正确链接,但是当我在console.log中记录该组件的状态时,状态尚未更新。
我尝试重新格式化我的代码,并查看了多个示例,看起来应该可以运行?当我从reducer登录时,它接收到的动作只是在不更新状态。
const mapStateToProps = state => ({
todos: state
});
onSubmit(e) {
e.preventDefault();
let payload = this.state.content
this.props.dispatch(post_todo(payload));
console.log(this.props.todos)
this.setState({
content: ""
})
}
export default (
state = [],
action
) => {
switch (action.type) {
case POST_TODO:
console.log("got it")
console.log(action.payload)
console.log(state)
return [
...state,
action.payload
];
default:
return state;
}
};
export function post_todo (payload){
return {
type: POST_TODO,
payload
};
}
它应该将props.todos更新为正确的状态,但每次都显示一个空数组。
答案 0 :(得分:1)
onSubmit(e) {
e.preventDefault();
let payload = this.state.content
this.props.dispatch(post_todo(payload)); <=== this line
console.log(this.props.todos)
this.setState({
content: ""
})
}
当您在我所指的行上调度动作时,它将执行您的动作,然后您可以在componentWillReceiveProps
...
向组件接收新的props
会使组件重新render
因此,控制台在执行操作后立即记录您的道具,将永远不会给您new state
...在componentWillReceiveProps
或render
中等待方法
下面是一个根据您的情况获取新道具(待办事项)的示例:
componentWillReceiveProps(nextProps) {
const { todos } = nextProps;
console.log('I recieved new todos', todos);
}
此外,如果您的render
方法呈现了显示您从todos
抓取的this.props.todos
字段的任何组件,那么...也会自动更新...