如何解决我应该使用什么来代替 useSelector 或 mapStateToProps?
我应该用什么来代替 useSelector
或 mapStatetoProps
?那些运行多次并将所有值更改为最后一个。
我有一个电子商务应用程序,
ProductDetails
组件包含产品评论,我将这些评论映射到 ProductReview
组件以获取从用户 ID 获取的用户信息。
ProductDetails.js
import React,{ useEffect } from "react";
import ProductReview from "../components/ProductReview";
import { useSelector,usedispatch } from 'react-redux';
import { getProductDetailsById } from "../Store/actions/productActions";
export default function ProductDetails(props) {
const dispatch = usedispatch()
const product = useSelector((state) => state.product)
useEffect(() => {
const { id } = props.match.params;
const payload = {
params: {
id,},};
dispatch(getProductDetailsById(payload));
},[dispatch,props.match.params]);
return (
<div>
{product.productDetails.reviews &&
product.productDetails.reviews.map((item,index) =>
(
<li key={item.userId}>
<ProductReview key={item.userId} userId={item.userId}
review={item.review}/>
</li> )
)}
)}
</div>
);
}
ProductReview.js
import React,{ useState,useEffect } from 'react';
import { getUSerById } from '../Store/actions/userAction';
import {usedispatch,useSelector} from 'react-redux';
export default function ProductReview(props) {
const dispatch = usedispatch()
const user = useSelector(state => state.user)
const {userId} = props;
useEffect(() => {
const payload = {
params : {
userId
}
}
dispatch(getUSerById(payload))
},[userId]);
return (
<div>
{user && user.user.firstName} : {props.review}
</div>
)
}
这部分代码运行多次并且
将所有用户信息值(用户名)更改为最后一个。
**所有产品评论firstName
更改为最后一条 ** 全部相同名称
const user = useSelector(state => state.user)
有什么办法可以摆脱这个??
它当前在 ProductReview
组件中使用 Axios 和 useState()
时运行,但我想使用 redux。
userReducer.js
import { userConstants } from "../actions/Types";
const initState = {
user: {},loading: false,error: null
};
export default (state = initState,action) => {
console.log(action.payload)
switch(action.type){
case userConstants.GET_USER_BY_ID_SUCCESS:
return state = {
...state,user : action.payload.user,error: null
}
case userConstants.GET_USER_BY_ID_FAILURE:
return state = {
state,error: action.payload.error
}
default:
return state
}
}
解决方法
根据我在评论中的理解,您需要以某种方式将所有用户存储在您的 redux 存储中。 例如,您可以执行以下操作:
-
将
initState
更改为:const initState = { users: {},loading: false,error: null };
-
将
GET_USER_BY_ID_SUCCESS
减速器更改为 (请注意,我使用的是user.id
,但您的 ID 可能存储在其他属性中):case userConstants.GET_USER_BY_ID_SUCCESS: return state = { ...state,users: { ...state.users,[action.payload.user.id]: action.payload.user },error: null }
-
将 useSelector 更改为:
const users = useSelector(state => state.users)
-
添加:
const user = users[props.userId]
通过这种方式,您应该拥有正确的用户。如果我错过了什么,请告诉我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。