我有一个显示收到的帖子的组件,另一个显示用户发布的帖子的组件,“我的操作”将根据他们单击的选项卡来获取该帖子。以下是动作。
import { FETCH_POSTS_RECEIVED } from './types';
export const fetchPostReceived = (id) => dispatch => {
fetch('/posts/vh5given/' + id , {
method: 'GET',
headers: {
'content-type' : 'application/json'
}
})
.then(res => res.json())
.then(userPosts => dispatch ({
type:FETCH_POSTS_RECEIVED,
payload: userPosts
}));
// .then(data = console.log(data));
}
export const fetchPostsFromUser = (id) => dispatch => {
fetch('/posts/' + id , {
method: 'GET',
headers: {
'content-type' : 'application/json'
}
})
.then(res => res.json())
.then(posts => dispatch ({
type:FETCH_POSTS_FROM_USER,
payload: posts
}));
// .then(data = console.log(data));
}
它们的功能在ComponentDidUpdate上被调用
componentDidUpdate(prevProps) {
// console.log(prevUserId);
let prevUserId = prevProps.user.map((user) => (user.id));
let userId = this.props.user.map((user) => (user.id));
if(prevUserId.length < 1 || prevUserId == undefined && userId) {
console.log("Currently Updating from vh5");
console.log(prevUserId);
console.log(userId);
this.props.fetchPostReceived(userId);
}
}
componentDidUpdate(prevProps) {
// console.log(prevUserId);
let prevUserId = prevProps.user.map((user) => (user.id));
let userId = this.props.user.map((user) => (user.id));
if(prevUserId.length < 1 || prevUserId == undefined){console.log('undefineeeeed')}
if(prevUserId.length < 1 || prevUserId == undefined && userId) {
console.log("Currently Updating");
console.log(prevUserId);
console.log(userId);
this.props.fetchPostsFromUser(userId);
console.log('this is the props ' + this.props.posts)
}
}
我遇到的问题是,调用Fetch Post Received函数时,道具会被更改。由于我在更新状态时从props状态渲染帖子,因此显示了错误的帖子。
为什么会这样,我该如何解决?
答案 0 :(得分:0)
我无法添加评论,但是您是两次调用componentDidMount(这是您的代码所建议的),还是您尝试过的那两个分开的事情,因为
let prevUserId = prevProps.user.map((user) => (user.id));
let userId = this.props.user.map((user) => (user.id));
或
this.props.fetchPostsFromUser(userId);
解雇两次可能是您的问题。