为什么当我解构属性时接收 props 的组件不工作，但当我使用 props.key 时它工作？

Question

问题

我有一个使用这个 React Redux 样板的应用程序：https://github.com/flexdinesh/react-redux-boilerplate

我创建了一个连接到注入的 reducer + saga 的新页面。我收到以下道具：posts、loading、error、loadPosts 和 match

当我直接使用这些应用程序时，应用程序按预期工作。但是，一旦我开始破坏道具，应用程序就会出现意外行为。

尤其是 match 道具。

当我这样做的时候:

const SubforumPage = (props) => {
      useEffect(() => {
        const { id: subId } = props.match.params;
        console.log('props: ', subId);
      }, []);
    // .... other code
    }

没问题，一切正常。

但是当我这样做的时候:

const SubforumPage = ({match}) => {
  useEffect(() => {
    const { id: subId } = match.params;
    console.log('props: ', subId);
  }, []);
// .... other code
}

`match` 突然变得不确定！

我真的不知道为什么会这样。这是我第一次看到这样的错误。

这个特定的页面在路由文件中是这样设置的：

<Route path="/sub/:id" component={SubforumPage} />

在函数参数中使用 (props) 时显然有效，但在 ({match})

中无效

这是为什么？可以请有人帮我解决这个问题。

我尝试了什么？

我不断地开始分解一个又一个道具。起初这种方法有效并且它仍然不是未定义的但是当我得到一些道具时，它是不同的，它会停止工作。

我认为这与我如何使用 useEffect() 挂钩有关？我传递了一个空数组，所以它在安装时只执行运行。似乎当我刷新页面时，帖子被清除，但 useEffect 不再运行，因此不会获取新帖子。因为 useEffect 钩子里面的 console.log 也是 ~~undefined~~ 甚至运行。但是例如 loading prop in console.log outside useEffect 确实不是 undefined （但这仍然不能解释为什么它使用 (props) 作为参数）。

我刚才用的useEffect错了吗？

非常感谢

Answer 1

好吧，伙计们，这完全是我的错。猜猜我太累了：D。这是导致问题的原因：

我在 useEffect 挂钩中获取了我的 post。我还渲染了一个我传入 posts 的组件。但是 post 是不可用的，因为组件必须等待数据进来。所以我完全忘记了我必须等待数据。

之前:

return <PostsGroup posts={posts} />;

之后：（正确）

return <PostsGroup posts={posts || []} />;

我有一个看起来像这样的检查：

if (loading) return <CircularProgress />;

（在其他 return 之前）。但这并不重要，因为当组件最初呈现时加载是错误的。所以我也将初始值从 loading 设置为 true （在我的 reducer 的 initialState 中）。所以我现在有两张支票。

抱歉各位。太蠢了

为什么当我解构属性时接收 props 的组件不工作，但当我使用 props.key 时它工作？

Why is my component that receives props not working when I destructure out the properties, but when I use props.key it's working?

javascript

reactjs

redux

react-hooks

`match` 突然变得不确定！

我尝试了什么？

为什么当我解构属性时接收 props 的组件不工作，但当我使用 props.key 时它工作？

Why is my component that receives props not working when I destructure out the properties, but when I use props.key it's working?

javascript

reactjs

redux

react-hooks

match 突然变得不确定！

我尝试了什么？

`match` 突然变得不确定！