我正在制作一个用于练习目的的SPA Web应用程序，但是在React Rendering方面遇到了问题。我的应用程序通常只有两条工作路线">主页和上传"。家路由 从 API 获取数据并将其显示在正文组件中。通过上传，我可以将产品上传到数据库...除了主页之外，一切正常...
当我从另一条路线回到Home时，以前的状态保持不变，但由于某种原因，状态会成倍增加，而evrything只是加倍，我的意思是获取的数据会加倍。请帮助我....
显示提取数据的我的应用的正文组件//Importing Redux Action Creators
import {getProducts, deleteProduct} from "../Features/actions/productActions"
const Body = ({getProducts, deleteProduct, productState})=>{
const {products, loading, error} = productState; //Destructuring redux State
//Fetching data using redux actions inside useEffect hook
useEffect(()=>{
getProducts()
},[getProducts])
//Providing the payload as id for Redux Actions
const deleteProducts = (id)=>{
deleteProduct(id)
}
return (
<div className="display-flex width-full flex-wrap justify-content-center">
//Some Loading Logic for displaying data
{!loading && !error && products?products.map(product=>(
product.data?product.data.map(d=>(
//This is the component which displays the fetched data as bootstarp card
<BodyDiv
key={uuid.v4()}
imgSrc={d.imgSrc}
title={d.title}
details={d.details}
description={d.description}
onClick={()=>deleteProducts(d._id)}
/>
)):product.map(d=>(
<BodyDiv
key={uuid.v4()}
imgSrc={d.imgSrc}
title={d.title}
details={d.details}
description={d.description}
onClick={()=>deleteProducts(d._id)}
/>
))
))
: loading&&!error
? <div className="vertical-center-strict horizontal-center-strict">Loading.......</div>
: <div className="vertical-center-strict horizontal-center-strict">No Internet!</div>
}
</div>
)
}
//The layout for displaying fetched data
const BodyDiv = (props)=>{
return(
<div className="container-div width-full card tiny-padding align-self-start">
<img title={props.title} className="img-responsive hover-filter" src={props.imgSrc}/>
<h2 className="text-align-center">{props.title}</h2>
<h5>{props.details}</h5>
<p className="text-align-justify">{props.description}</p>
<button
className="btn btn-danger"
onClick={props.onClick}
>Delete</button>
</div>
)
}
//mapping & dispatching state to props from redux
const mapStateToProps = (state)=>({
productState: state.productState
})
//React-Redux Connect to connect the component with Store
const conn = connect(mapStateToProps, {getProducts, deleteProduct})(Body)
export default conn;
//Using redux-thunk for asynchronus middleware
export const getProducts = (payload)=>(dispatch)=>{
return fetch("/api/products") //URL
.then(res=>{
dispatch({
type:FETCHING_PRODUCTS //While fetching data
})
if(!res.ok){
dispatch({
type: ERROR_GET_PRODUCTS //If fetch fails then executes
})
}
return res.json();
})
.then(json=>{
if(json)dispatch({
type: FETCHED_PRODUCTS,
payload: json //Fetched json data as payload
})
})
.catch(err=>{
console.log("Error!! failed to fetch data: "+ err)
})
}
//Reducer Function
//initial state
const initialState = {
products: [], //this the state where Fetched data gets injected...
loading: true,
error: false,
};
const productReducer = (state = initialState, action) => {
switch (action.type) {
case FETCHING_PRODUCTS:
return {
...state,
loading: true,
};
case FETCHED_PRODUCTS:
return {
...state,
products: state.products.concat(action.payload), //I don't know but I doubt here is the problem
loading: false,
error: false,
};
case ERROR_GET_PRODUCTS:
return {
...state,
loading: false,
};
default:
return state;
}
};
export default productReducer;
我相信useEffect((钩子或Reducer Function有问题。有些人会说我应该尝试使用产品状态作为useEffect依赖，但这会使情况变得更糟......请你们帮帮我!!自 1 天以来，我一直在尝试解决此问题...谢谢！！
是的，问题似乎是你认为它所在的地方
return {
...state,
// the problem is here, you are adding products when in reality you just be just replacing them
products: state.products.concat(action.payload), //I don't know but I doubt here is the problem
loading: false,
error: false,
};
将其替换为
return {
...state,
products: action.payload
loading: false,
error: false,
};