每当我设置新状态时，我在功能组件中使用usestate reacthooks我的问题 整个组件都重新渲染，我的状态又回到了初始状态
const Feeds = (props) => {
// remove the intial element that is of no use...
const baseUrl = props.api
let nextPage = props.feeds.nextPage;
let products = props.feeds.products.filter(el => !el.isSilder);
console.log('intial products ....', products);
let [feeds,setFeeds] = useState(products);
let waitForNextTrench = false;
const feedRequestData = {
filterData: {
catArray:[],
assured:"0",
gender:"NA",
cityId:"NA"
},
pageNo: nextPage
};
useEffect(()=>{
window.addEventListener("scroll",handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
},[])
const handleScroll = () => {
const loadMore = document.getElementById("loadMore");
if (loadMore && shared.isElementVisible(loadMore)) {
loadMoreFeeds();
}
};
const loadMoreFeeds = () => {
if (nextPage != 1) {
return null;
}
if (waitForNextTrench) {
return null;
}
waitForNextTrench = true // make the function wait till the data is
renderd properly
feedsApi.userFeeds(baseUrl+'/product/userFeeds',feedRequestData).then(data=>{
if (data.success) {
const updatedFeeds = products.concat(data.products.filter(el => !el.isSilder));
setFeeds(updatedFeeds);
console.log('this is the feeds', feeds.length);
nextPage = data.nextPage;
waitForNextTrench = false;
}else {
// lets handle error later
waitForNextTrench = true;
}
}).catch(err=>{
// let me handle error later
})
}
const headObject = {
title:'Buy Sell fashion / electronics / tickets / books / online – coutloot.com", "Best platform to sell | buy products online, women\'s and men\'s clothes, ethnic, mobile phones, beauty/makeup, books, footwear, bags, electronics, shows, events tickets online in india',
desc : "",
keywords:""
}
return(
<Fragment>
<Header headobject={headObject}/>
<div className={`d-flex f22 ${styles.feedheader}`}>
<a className="icon-hamberger_menu py-2-5 pl-3 text-pink1"></a>
<div className="d-flex align-items-center text-black pl-3 w67">
<span className="f16 font-bold px-2"> Filters </span>
<img src="/assets/images/go-forward-arrow.png" alt="" height="15px" width="15px" />
</div>
<div className="d-flex">
<div className="text-center py-2 px-2 r-icon">
<span className="icon-search ml-auto" ></span>
</div>
<div className="text-center py-2 px-2 r-icon">
<a className="icon-wishlist" ></a>
</div>
<div className="text-center py-2 px-2 r-icon position-relative">
<a className="icon-shopping-cart" ></a>
<span className={`${styles.cartCount}`}> 1</span>
</div>
</div>
</div>
<Layout >
{
<FeedController feeds={feeds} />
}
</Layout>
<LoadMore />
</Fragment>
)
}
我想在设置状态下推送新数组，但是每次它都会渲染并且状态返回其初始值
初始值是数组列表，当用户滚动到屏幕底部时，我想简明从API加载获得的更多提要的新数组列表
现在我已经给出了完整的组件代码
我只想更新dom而不是整个功能
答案 0 :(得分：0)
尝试将函数包装在useEffect hook中，它可以处理组件生命周期方法
NANs答案 1 :(得分：0)
我更深入地检查了您的代码，我认为我发现了问题：您依靠products更新状态，但是products是每个渲染上的新变量。使用useState的原因是React将确保在重新渲染之间保持此状态。希望它能解决您的问题。
const Feeds = props => {
// remove the intial element that is of no use...
const baseUrl = props.api;
let nextPage = props.feeds.nextPage;
let products = props.feeds.products.filter(el => !el.isSilder);
console.log("intial products ....", products);
let [feeds, setFeeds] = useState(products);
let waitForNextTrench = false;
const feedRequestData = {
filterData: {
catArray: [],
assured: "0",
gender: "NA",
cityId: "NA"
},
pageNo: nextPage
};
const loadMoreFeeds = () => {
if (nextPage === 1 || !waitForNextTrench) {
waitForNextTrench = true; // make the function wait till the data is renderd properly
feedsApi
.userFeeds(baseUrl + "/product/userFeeds", feedRequestData)
.then(data => {
if (data.success) {
const updatedFeeds = feeds.concat( // This was the important change!!!
data.products.filter(el => !el.isSilder)
);
setFeeds(updatedFeeds);
console.log("this is the feeds", feeds.length);
nextPage = data.nextPage;
waitForNextTrench = false;
} else {
// lets handle error later
waitForNextTrench = true;
}
})
.catch(err => {
// let me handle error later
});
}
};
const handleScroll = () => {
const loadMore = document.getElementById("loadMore");
if (loadMore && shared.isElementVisible(loadMore)) {
loadMoreFeeds();
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const headObject = {
title:
"Buy Sell fashion / electronics / tickets / books / online – coutloot.com\", \"Best platform to sell | buy products online, women's and men's clothes, ethnic, mobile phones, beauty/makeup, books, footwear, bags, electronics, shows, events tickets online in india",
desc: "",
keywords: ""
};
return (
<Fragment>
<Header headobject={headObject} />
<div className={`d-flex f22 ${styles.feedheader}`}>
<a className="icon-hamberger_menu py-2-5 pl-3 text-pink1"></a>
<div className="d-flex align-items-center text-black pl-3 w67">
<span className="f16 font-bold px-2"> Filters </span>
<img
src="/assets/images/go-forward-arrow.png"
alt=""
height="15px"
width="15px"
/>
</div>
<div className="d-flex">
<div className="text-center py-2 px-2 r-icon">
<span className="icon-search ml-auto"></span>
</div>
<div className="text-center py-2 px-2 r-icon">
<a className="icon-wishlist"></a>
</div>
<div className="text-center py-2 px-2 r-icon position-relative">
<a className="icon-shopping-cart"></a>
<span className={`${styles.cartCount}`}> 1</span>
</div>
</div>
</div>
<Layout>{<FeedController feeds={feeds} />}</Layout>
<LoadMore />
</Fragment>
);
};
此外，我建议您使用eslint并再次检查文档，它们总是会带来洞察力。