[英]Why is my component that receives props not working when I destructure out the properties, but when I use props.key it's working?
The Problem 问题
I have an application that uses this React Redux Boilerplate: https://github.com/flexdinesh/react-redux-boilerplate 我有一个使用这个React Redux Boilerplate的应用程序: https : //github.com/flexdinesh/react-redux-boilerplate
I created a new page that is connected to the injected reducer + saga. 我创建了一个连接到注入的reducer + saga的新页面。 I receive following props: posts
, loading
, error
, loadPosts
and match
我收到以下道具: posts
, loading
, error
, loadPosts
和match
When I use these directly the app is working as expected. 当我直接使用这些应用程序正在按预期工作。 But as soon as I start to destructure the props, the app is behaving unexpectedly. 但是一旦我开始构建道具,应用程序就会出现意外行为。
Especially with the match
props. 特别是搭配match
道具。
When I do it like this: 当我这样做时:
const SubforumPage = (props) => {
useEffect(() => {
const { id: subId } = props.match.params;
console.log('props: ', subId);
}, []);
// .... other code
}
No problem everything works. 没问题一切正常。
But when I do it like this: 但是当我这样做时:
const SubforumPage = ({match}) => {
useEffect(() => {
const { id: subId } = match.params;
console.log('props: ', subId);
}, []);
// .... other code
}
match
suddenly gets undefined! match
突然变得不确定! I have really no clue what so ever why this is happening. 我真的不知道为什么会发生这种情况。 It's the first time that I see an error like this. 这是我第一次看到这样的错误。
This specific page is set up like this in the routing file: 此特定页面在路由文件中设置如下:
<Route path="/sub/:id" component={SubforumPage} />
And it's clearly working when using (props)
in the function arguments but not with ({match})
当在函数参数中使用(props)
而不是({match})
时,它显然有效
Why is this? 为什么是这样? Can please someone help me out here. 可以请有人帮帮我。
I think it has to do something with how I use my useEffect()
hook? 我认为它必须与我如何使用useEffect()
钩子做一些事情? I pass an empty array so it does just run when mounting. 我传递一个空数组,所以它只是在安装时运行。 It seems like when I refresh the page, the posts are cleared out but the useEffect doesn't run anymore, so the new posts doesn't get fetched. 看起来当我刷新页面时,帖子被清除,但useEffect不再运行,因此新帖子不会被提取。 Because hen also the console.log
inside the useEffect
hook is undefined doesn't even run. 因为母鸡也将console.log
里面useEffect
钩不确定甚至不运行。 But for example the loading
prop in console.log
outside of useEffect is indeed not undefined
(But that still does not explain why it's working with (props)
as argument). 但是例如在useEffect之外的console.log
的loading
道具确实没有undefined
(但是这仍然无法解释为什么它使用(props)
作为参数)。
Am I just using useEffect
wrong? 我只是使用useEffect
错了吗?
Many thanks 非常感谢
Ok guys that was completely my fault. 好吧,那完全是我的错。 Guess I'm too tired :D. 猜猜我太累了:D。 Here is what caused the problem: 以下是导致问题的原因:
I fetch my post in the useEffect
hook. 我在useEffect
钩子中获取我的帖子。 I also render a component where I pass in the posts
. 我还渲染了一个我传递posts
的组件。 But the posts are not available because the component has to wait for the data to come in. So I completely forgot that I have to wait for the data. 但这些帖子不可用,因为组件必须等待数据进入。所以我完全忘记了我必须等待数据。
Before: 之前:
return <PostsGroup posts={posts} />;
After: (correct) 之后:(正确)
return <PostsGroup posts={posts || []} />;
I had a check in place looking like this: 我有一个检查到位的样子:
if (loading) return <CircularProgress />;
(before the other return). (在另一个回归之前)。 But it doesn't matter because loading is false when the component initially renders. 但这并不重要,因为组件最初渲染时加载是错误的。 So I also set the initial value from loading
to true
(in my initialState of the reducer). 所以我还将初始值从loading
为true
(在reducer的initialState中)。 So I have now two checks in place. 所以我现在有两张支票。
Sorry guys. 对不起大家。 So stupid. 这么笨。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.