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

Posted 2023-02-19

【中文标题】为啥当我解构属性时接收道具的组件不起作用，但是当我使用 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?为什么当我解构属性时接收道具的组件不起作用，但是当我使用 props.key 时它起作用了？

【发布时间】：2019-11-01 14:28:19

【问题描述】：

问题

我有一个使用这个 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 在 useEffect 之外的 console.log 属性确实不是 undefined （但这仍然不能解释为什么它使用(props) 作为参数）。

我只是用useEffect 错了吗？

非常感谢

【问题讨论】：

有趣！为了测试，你能从你的useEffect 中删除那个[] 依赖数组，看看会发生什么？

然后还是不行。但我可能发现了错误。 useEffect 是否有可能是异步的，它仍然尝试渲染组件。因为我返回的是这个return <PostsGroup posts=posts />，然后它说posts 没有定义。我认为现在我认为它试图传递 posts 但由于 useEffect beein async 并且必须等待服务器的响应，它尚不可用。像这样return <PostsGroup posts=posts || [] /> 对其进行了测试，现在它似乎可以正常工作了。哦，男人的文字墙一无是处：P 谢谢尝试

【参考方案1】：

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

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

之前：

return <PostsGroup posts=posts />;

之后：（正确）

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

我有一张这样的支票：

if (loading) return <CircularProgress />;

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

对不起各位。太傻了。