如何解决React Redux,仅从第一页加载来自API的数据数据加载后渲染组件
我肯定在我的应用程序核心中做错了事。
我认为它正在其中向我的API发送请求。我对firstLoad标志告诉应用程序调用API也不满意。
我正在使用React / Redux-从这个样板https://www.npmjs.com/package/create-react-app-redux构建。
它使用mapStateToProps,mapDispatchToProps并进行连接以将所有内容粘合在一起。
所以我有一个名为“商店”的组件
// only true when user first visits url OR presses F5 to refresh.
// Its conveniently false when page rerenders
var firstLoad = true;
const Shop = ({ stateProps,dispatchProps }) => {
if(firstLoad) {
firstLoad = false;
// dispatchProps contains a method called changeState that will update state.shops to the result from the API. It will also set state.loading to true while calling and false when finished.
// Note,I am not modifying state directly. The dispatchProps wraps the action that does so
server.GetShops({url: "api/shops",updateField:"shops",loading:true,token:"abc-xyz"},dispatchProps);
}
if(stateProps.loading) {
return (
<div>loading...</div>
);
}
var shopUrl = window.location.href; // extract the part of the url after the domain
var selectedShop = stateProps.shops.find(s => {
return s.url === shopUrl;
});
if(!selectedShop) {
window.location.href = "/";
}
return (
<div>
{selectedShop.welcomeMessage}
</div>
);
}
我遇到的问题是我必须刷新TWICE才能看到welcomeMessage何时更改。
因此,如果它原来是数据库中的“ hello world”,而我在数据库中将其更改为“ hello UK”。
当我刷新页面时,我希望该应用程序获取数据并显示加载。 完成数据提取后,将进行重新渲染,并在欢迎消息中显示Hello UK。
但是直到第二页刷新后,这种情况才会发生。
我的描述对任何人有意义吗?
解决方法
您没有根据ribbon <- example %>%
group_by(values) %>%
summarize(min = min(value),max = max(value))
graph1 +
geom_ribbon(aes(x = values,ymin = min,ymax = max),data = ribbon,size = 0,fill = "#29c8e5",color = NA,alpha = 0.3,inherit.aes = FALSE)
的值进行任何更改
您应该将selectedShop的值保留在本地状态变量中
selectedShop
然后,只要通过api调用更改了值,就会更新本地状态值
const [ selectedShop,setSelectedShop ] = useState({});
现在,当stateProps中的值更改时,它将更新本地状态值并触发重新渲染。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。