Redux调度正在使用导致无限重发送的效果

Question

我尝试过搜索以前类似的问题，但许多答案都建议将依赖数组传递给useEffect，我已经这样做了。

这基本上是一个用户的展示页面：

const Profile = ({ currentUser, profileOwner, getProfileInfo, isMine }) => {
useEffect(() => {
getProfileInfo();
}, [profileOwner]);
return (stuff)
}

这是它的容器：

const mapStateToProps = ({ session, users }, ownProps) => ({
currentUser: users[session.id],
profileOwner: users[ownProps.params.userId],
isMine: session.id === parseInt(ownProps.params.userId),
});
const mapDispatchToProps = (dispatch, ownProps) => ({
getProfileInfo: () => dispatch(getProfileInfo(ownProps.params.userId)),
});

这就是我认为以某种方式导致重新渲染的动作：

export const getProfileInfo = (userId) => (dispatch) =>
axios.get(`/api/users/${userId}`).then((res) => res.data)
.then((user) => dispatch(receiveProfileOwner(user)));

如果我从依赖数组中取出profileOwner，就不会有更多的无限循环，但如果我导航到另一个用户的配置文件，它就不会获取用户数据。据我所见，profileOwner的值在第一次提取后根本不应该改变，所以我仍然很困惑为什么会有这个问题。

Answer 1

看起来使用profileOwner作为依赖关系是错误的。组件已经接收到路由参数作为道具，所以我将useEffect改为：

const Profile = ({ currentUser, profileOwner, getProfileInfo, isMine, params: { userId } }) => {
useEffect(() => {
getProfileInfo();
}, [userId]);

这有点乱，我希望有比添加更多道具更好的方法来做到这一点，但它确实解决了问题。