ReactJs:如何执行依赖于在 componentDidUpdate 中调用的 setState 结果的函数
ReactJs: How to execute a function that depends on the result of a setState that's called inside componentDidUpdate
我有这个 class 可以为不同的对话加载消息:
export class Messages extends Component {
constructor() {
super();
this.state = {
page: 0,
results_per_page: 10,
messages: [],
};
this.loadAnotherSetOfMessages = this.loadAnotherSetOfMessages.bind(this);
this.checkIfUserHasPickedAnotherConversation =
this.checkIfUserHasPickedAnotherConversation.bind(this);
}
componentDidMount() {
// #NOTE
// This will load first set of messages for first conversation opened by user
this.loadAnotherSetOfMessages();
}
componentDidUpdate(prevProps, prevState) {
this.checkIfUserHasPickedAnotherConversation(prevProps);
}
loadAnotherSetOfMessages() {
const { page, results_per_page } = this.state;
const conv_id = this.props.private_chat.current_chat._id;
this.props.getXNumberOfMessages(conv_id, page, results_per_page);
this.setState({
page: this.state.page + 1,
});
}
checkIfUserHasPickedAnotherConversation(prevProps) {
const has_user_clicked_a_conversation =
!!this.props.private_chat.current_chat;
if (has_user_clicked_a_conversation) {
const previous_conv_id = prevProps.private_chat.current_chat._id;
const new_conv_id = this.props.private_chat.current_chat._id;
const has_user_picked_another_conversation =
previous_conv_id != new_conv_id;
if (has_user_picked_another_conversation) {
this.resetMessages();
this.loadAnotherSetOfMessages();
}
}
}
resetMessages() {
this.setState({
page: 0,
messages: [],
});
}
// render() {}
}
每次用户点击一个新对话,我使用这个函数重置状态resetMessages
:
if (has_user_picked_another_conversation) {
this.resetMessages();
// This function needs to get executed after the update inside resetMessages has happened
this.loadAnotherSetOfMessages();
}
这是它的定义:
resetMessages() {
this.setState({
page: 0,
messages: [],
});
}
所以当在它之后执行的函数时,loadAnotherSetOfMessages
定义如下:
loadAnotherSetOfMessages() {
const { page, results_per_page } = this.state;
const conv_id = this.props.private_chat.current_chat._id;
this.props.getXNumberOfMessages(conv_id, page, results_per_page);
this.setState({
page: this.state.page + 1,
});
}
使用值 0
的初始 state
参数 page
和值 []
的 messages
因为这是一个全新的对话。
我面临的问题是函数loadAnotherSetOfMessages
的执行不是重新初始化状态参数 0
和 []
但使用上一次对话的最新值。
例如,如果之前的对话一直加载到 5
页,那么它将使用 5
而不是 0
。
我该怎么办?
你不能使用状态,因为反应的 setState
是异步的,这意味着你在状态中设置一个新值后,你将不得不等待下一次重新渲染组件获取更新后的状态值。如果您在设置状态值后立即尝试获取状态值,您将始终以之前的值结束。
所以最好的办法是,将新的状态值作为参数传递给 loadAnotherSetOfMessages
函数并使用它。喜欢
loadAnotherSetOfMessages(page, results_per_pag) {
const conv_id = this.props.private_chat.current_chat._id;
this.props.getXNumberOfMessages(conv_id, page, results_per_page);
this.setState({
page: page + 1,
});
}
然后这样称呼它
this.loadAnotherSetOfMessages(page, results)
我有这个 class 可以为不同的对话加载消息:
export class Messages extends Component {
constructor() {
super();
this.state = {
page: 0,
results_per_page: 10,
messages: [],
};
this.loadAnotherSetOfMessages = this.loadAnotherSetOfMessages.bind(this);
this.checkIfUserHasPickedAnotherConversation =
this.checkIfUserHasPickedAnotherConversation.bind(this);
}
componentDidMount() {
// #NOTE
// This will load first set of messages for first conversation opened by user
this.loadAnotherSetOfMessages();
}
componentDidUpdate(prevProps, prevState) {
this.checkIfUserHasPickedAnotherConversation(prevProps);
}
loadAnotherSetOfMessages() {
const { page, results_per_page } = this.state;
const conv_id = this.props.private_chat.current_chat._id;
this.props.getXNumberOfMessages(conv_id, page, results_per_page);
this.setState({
page: this.state.page + 1,
});
}
checkIfUserHasPickedAnotherConversation(prevProps) {
const has_user_clicked_a_conversation =
!!this.props.private_chat.current_chat;
if (has_user_clicked_a_conversation) {
const previous_conv_id = prevProps.private_chat.current_chat._id;
const new_conv_id = this.props.private_chat.current_chat._id;
const has_user_picked_another_conversation =
previous_conv_id != new_conv_id;
if (has_user_picked_another_conversation) {
this.resetMessages();
this.loadAnotherSetOfMessages();
}
}
}
resetMessages() {
this.setState({
page: 0,
messages: [],
});
}
// render() {}
}
每次用户点击一个新对话,我使用这个函数重置状态resetMessages
:
if (has_user_picked_another_conversation) {
this.resetMessages();
// This function needs to get executed after the update inside resetMessages has happened
this.loadAnotherSetOfMessages();
}
这是它的定义:
resetMessages() {
this.setState({
page: 0,
messages: [],
});
}
所以当在它之后执行的函数时,loadAnotherSetOfMessages
定义如下:
loadAnotherSetOfMessages() {
const { page, results_per_page } = this.state;
const conv_id = this.props.private_chat.current_chat._id;
this.props.getXNumberOfMessages(conv_id, page, results_per_page);
this.setState({
page: this.state.page + 1,
});
}
使用值 0
的初始 state
参数 page
和值 []
的 messages
因为这是一个全新的对话。
我面临的问题是函数loadAnotherSetOfMessages
的执行不是重新初始化状态参数 0
和 []
但使用上一次对话的最新值。
例如,如果之前的对话一直加载到 5
页,那么它将使用 5
而不是 0
。
我该怎么办?
你不能使用状态,因为反应的 setState
是异步的,这意味着你在状态中设置一个新值后,你将不得不等待下一次重新渲染组件获取更新后的状态值。如果您在设置状态值后立即尝试获取状态值,您将始终以之前的值结束。
所以最好的办法是,将新的状态值作为参数传递给 loadAnotherSetOfMessages
函数并使用它。喜欢
loadAnotherSetOfMessages(page, results_per_pag) {
const conv_id = this.props.private_chat.current_chat._id;
this.props.getXNumberOfMessages(conv_id, page, results_per_page);
this.setState({
page: page + 1,
});
}
然后这样称呼它
this.loadAnotherSetOfMessages(page, results)