Разрушенный объект как параметр функции - PullRequest
Новая
       20

Разрушенный объект как параметр функции

0 голосов
/ 27 октября 2019

Я не понимаю параметр const Posts ниже. Я довольно новичок в узле / 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]); ```

Ответы [ 2 ]

0 голосов
/ 27 октября 2019

Да, это объект параметра неструктурированной функции.

В вашем случае параметры Posts проходят через Redux connect () function. 

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

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

Проверьте ваш getPosts импорт и убедитесь, что он не undefined. 

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

Также проверьте состояние вашего притока и убедитесь, что он имеет state.post.

0 голосов
/ 27 октября 2019

То есть Posts является компонентом React Function .

Все компоненты 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
}

Но вы можете пойти еще дальше и сделать то, что называется "распаковкой", чтобы разрушить вложенные свойства 

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

Наконец, вместо того, чтобы делать это в теле функции, вы можете деструктурировать и распаковать объекты в строке, где аргументы для одного и того же результата. 

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

Что и делает ваш пример кода.

Похоже, он ожидает, что родительский компонент передаст функцию как getPosts prop, которая при вызове сначала установит posts.loading в true, загрузит сообщения, затем установит posts.loading в false. Пример: 

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, чтобы получить запомненный обратный вызов здесь, или вы застрянете в бесконечном цикле

** РЕДАКТИРОВАТЬ **

После того, как мы посмотрели на предоставленную ссылку, она немного изменилась. Вместо того, чтобы post объект предоставлялся родительским компонентом, он фактически предоставляется за счет редукса, но логика по сути та же. Разница в том, что вместо того, чтобы родительский компонент изменял состояние загрузки и состояние публикации, это делается с помощью управления состоянием избыточности.

...