时间戳

首页 > 解决方案 > 为什么当我解构属性时接收道具的组件不起作用，但是当我使用 props.key 时它起作用了？

javascript - 为什么当我解构属性时接收道具的组件不起作用，但是当我使用 props.key 时它起作用了？

问题描述

问题

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

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

当我直接使用这些时，应用程序按预期工作。但是，一旦我开始解构道具，应用程序的行为就出乎意料。

尤其是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 不再运行，因此新帖子不会被获取。因为 henconsole.log内部的useEffect钩子也是undefined甚至没有运行。但是例如useEffect 之外的道具确实不是loading（ 但这仍然不能解释为什么它作为参数使用）。console.logundefined(props)

我只是用useEffect错了吗？

非常感谢

标签： javascriptreactjsreduxreact-hooks

解决方案

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

我把我的帖子放在了useEffect钩子里。我还渲染了一个我传入的组件posts。但是帖子不可用，因为组件必须等待数据进来。所以我完全忘记了我必须等待数据。

前：

return <PostsGroup posts={posts} />;

之后：（正确）

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

我有一个看起来像这样的地方：

if (loading) return <CircularProgress />;

（在另一个返回之前）。但这并不重要，因为在组件最初呈现时加载是错误的。所以我还将初始值设置为从loadingto true（在我的减速器的 initialState 中）。所以我现在有两个检查。

对不起大家。这么笨。

推荐阅读