解构对象作为函数参数

Question

下面const Posts的参数我没看懂。我是 node/React 的新手。它是一个解构的参数对象吗？或者它只是一个作为参数传递的对象？

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 是 React Function component.

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

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

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

你当然可以解构组件中的 props 对象：

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

但您可以更进一步，执行所谓的 "unpacking" 以解构嵌套属性

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

最后，您可以在线解构和解压缩对象，而不是在函数体中执行此操作，其中参数用于相同的结果。

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

您的代码示例就是这样做的。

它似乎期望父组件传入一个函数作为 getPosts 属性，当调用时将首先将 posts.loading 设置为 true，加载 posts，然后将 posts.loading 设置为假。例如：

function SomeParentComponent() {
  const [loading, setLoading] = useState(false)
  const [posts, setPosts] = useState([])

  const loadPosts = useCallback(async () => {
    setLoading(true)
    const loadedPosts = await loadPostsSomehow()
    setPosts([posts, ...loadedPosts])
    setLoading(false)
  }, [])
  return <Posts getPosts={loadPosts} post={{posts, loading}} />
}

确保在此处使用 useCallback 获取记忆回调，否则您将陷入无限循环

**编辑**

实际查看提供的link后，实际上略有不同。 post 对象不是由父组件提供的，实际上是由 redux 提供的，但逻辑本质上是相同的。不同之处在于，它不是父组件更改加载和 post 状态，而是通过 redux 状态管理来完成。

Answer 2

是的，是解构函数参数对象

在你的例子中，Posts 的参数通过 Redux connect() 函数传递。

const mapStateToProps = state => ({
  post: state.post
});

export default connect(
  mapStateToProps,
  { getPosts }
)(Posts);

检查您的 getPosts 导入并确保它不是 undefined。

import { getPosts } from '../../actions/post';

还要检查你的 redux 状态并确保它有 state.post.

解构对象作为函数参数

Destructured object as function parameter

javascript

destructuring

reactjs