React Hook "useSelector" 在函数"posts"中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数

Question

Posts.js
import React from 'react'
import Post from './Post/Post'
import UseStyles from "./style"
import {useSelector} from "react-redux"
function posts() {
const classes= UseStyles()
const Posts=useSelector((state)=>state.Posts)       //This state refers the to the whole redux store and in this state.Post, post is coming form the Reducers/index.js
console.log(Posts)
return (
<div>
<h1>POSTS</h1>
<Post/>
<Post/>
</div>
)
}
export default posts
index.js
import { combineReducers } from "redux";
import Posts from "./Posts";
export default combineReducers({ Posts })

src\Components\Posts\Posts.js第7:17行：React Hook"；useSelector"；在函数"中被调用；帖子"；既不是React函数组件，也不是自定义React Hook函数。React组件名称必须以大写字母开头。React Hook名称必须以单词"开头；使用"；反作用挂钩/挂钩规则

这就是实际的错误。一开始是这个错误中提到的state.posts，然后我更改了它，但它仍然显示相同的错误，我也重新启动了服务器，但没有发生任何新的事情。

Answer 1

适当的React组件是PascalCased。您还应该将控制台日志移动到useEffect中，这样它就成为了原本被认为是纯函数的有意副作用。

...
import useStyles from "./style"
...
function Posts() {
const classes = useStyles();
const posts = useSelector((state) => state.Posts);
useEffect(() => {
console.log(posts);
}, [posts])'

return (
<div>
<h1>POSTS</h1>
<Post/>
<Post/>
</div>
);
}
export default Posts;