解构对象作为函数参数

Question

我不明白const Posts下面的参数。我对节点/反应相当陌生。它是一个解构的参数对象吗？或者它只是一个作为参数传递的对象？

getPosts 和 post 显示为未定义。但我不明白参数对象从哪里传递到函数中......

完整代码在这里：https : //github.com/bradtraversy/devconnector_2.0/blob/master/client/src/components/posts/Posts.js

提前致谢！！

import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import PostItem from './PostItem';
import PostForm from './PostForm';
import { getPosts } from '../../redux/actions/post';

const Posts = ({ getPosts, post: { posts, loading } }) => {
  useEffect(() => {
    getPosts();
  }, [getPosts]); ```

Answer 1

所以，Posts是一个作出反应的功能成分。

所有 Function 组件都将接收一个 props 对象作为它的第一个参数。

const Posts = (props) => { /* ... */ }

props 将始终是一个包含组件渲染时传递给它的 props 的对象，例如：

import Posts from './path/to/Posts'

function SomeParentComponent() {
  return <Posts limit={10} categories={{news:true, sports:false}} />
}

在这种情况下，props将是一个如下所示的对象：

import Posts from './path/to/Posts'

function SomeParentComponent() {
  return <Posts limit={10} categories={{news:true, sports:false}} />
}

您当然可以在组件中解构 props 对象：

{
  limit : 10,
  categories : {
    news : true,
    sports : false,
  }
}

但是你可以更进一步，做所谓的“解包”以解构嵌套的属性

const Posts = (props) => {
  const { 
   limit,
   categories
  } = props
  // ... other stuff
}

最后，您可以在参数用于相同结果的情况下内嵌解构和解包对象，而不是在函数体中执行此操作。

const Posts = (props) => {
  const { 
   limit,
   categories : {
     sports,
     news
   }
  } = props
  // ... other stuff
}

这就是您的代码示例正在做什么。

看起来它期望父组件传入一个函数作为getPosts道具，当被调用时，它将首先设置posts.loading为 true，加载帖子，然后设置posts.loading为 false。前任：

const Posts = ({limit, categories:{news,sports}}) => {
  // ... other stuff
}

确保使用useCallback这里获得记忆回调，否则您将陷入无限循环

**编辑**

实际查看提供的链接后，实际上略有不同。代替的post由父组件提供的对象的存在，它实际上由终极版提供的，但逻辑是基本相同的。不同之处在于，它不是通过父组件更改加载和发布状态，而是通过 redux 状态管理完成的。