我不理解下面的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]); ```
答案 0 :(得分:0)
所以Posts
是React Function component。
所有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
将是一个看起来像这样的对象:
{
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
道具的形式传递函数,调用该函数时首先会将posts.loading
设置为true,加载帖子,然后将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
获取备注回调,否则您将陷入无限循环
**编辑**
在实际查看所提供的链接之后,实际情况略有不同。实际上,它不是由父组件提供的post
对象,而是由redux提供的,但是逻辑本质上是相同的。区别在于,它不是通过父组件更改加载和发布状态,而是通过redux状态管理来完成。
答案 1 :(得分:0)
是的,它是结构化的函数参数对象。
在您的情况下,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
。