变形对象作为功能参数 [英] Destructured object as function parameter

问题描述

我不理解下面的 const Posts 的参数.我是Node/React的新手.它是一个结构化的参数对象吗?还是仅仅是作为参数传递的对象?

I don’t understand the parameter of const Posts below. I’m fairly new to node/React. Is it a destructured parameter object? Or is it just an object being passed as a parameter?

getPosts和post显示为未定义.但是我不知道参数对象是从哪里传递到函数中的...

getPosts and post are showing as undefined. But I don’t understand where the parameter object is being passed from into the function...

完整代码在这里: 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]); ```

推荐答案

所以 Posts 是所有Function组件都会收到一个props对象作为其第一个参数.

All Function components will receive a props object as its first argument.

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

props始终是一个对象，其中包含在渲染组件时传递给它的props，例如:

props will always be an object containing the props that were passed into it when the component was rendered, for example:

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

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

在这种情况下， props 将是一个看起来像这样的对象:

In this case props will be an object that looks like this:

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

您当然可以破坏组件中的props对象:

You can of course destructure the props object in your component:

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

但是您可以走得更远，进行所谓的拆包"，以解构嵌套的属性

But you can go even further and do what's called "unpacking" in order to destructure nested properties

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

最后，您无需在函数主体中执行此操作，而是可以对参数用于同一结果的内联对象进行解构和解包.

Lastly, instead of doing that in the function body, you can destructure and unpack objects in-line where the arguments are for the same result.

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

您的代码示例正在做什么.

Which is what your code sample is doing.

似乎期望父组件传入一个作为 getPosts 道具的函数，该道具在调用时将首先将 posts.loading 设置为true，加载帖子，然后将 posts.loading 设置为false.例如:

It appears it's expecting the parent component to pass in a function as the getPosts prop, which when called will first set posts.loading to true, load the posts, then set posts.loading to false. Ex:

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 在此处获取提示的回调，否则您将陷入无限循环

Make sure to use useCallback to get a memoized callback here or you will get stuck in an infinite loop

**编辑**

在实际查看所提供的链接之后，实际情况略有不同.它不是由父组件提供的 post 对象，而是由redux提供的，但是逻辑本质上是相同的.区别在于，它不是通过父组件更改加载和发布状态，而是通过redux状态管理来完成.

After actually looking at the link provided, it's slightly different actually. Instead of the post object being provided by the parent component, it's actually provided by redux, but the logic is essentially the same. The difference is that instead of the parent component changing the loading and post state, it's done via redux state management.

这篇关于变形对象作为功能参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！