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

Question

问题

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

我创建了一个连接到注入(inject)的 reducer + saga 的新页面。 我收到以下 Prop :posts , loading , error , loadPosts和 match

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

尤其是 match Prop 。

当我这样做时:

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})

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

我尝试了什么？

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

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

我只是在使用 useEffect错了吗？

非常感谢

Answer 1

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

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

之前:

return <PostsGroup posts={posts} />;

之后:(正确)

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

我有一张看起来像这样的支票:

if (loading) return <CircularProgress />;

(在另一个返回之前)。但这并不重要，因为当组件最初呈现时加载是错误的。 所以我也将初始值设置为loading至 true (在我的 reducer 的初始状态)。所以我现在有两张支票。

对不起各位。太蠢了。