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

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 函数组件也不是自定义 React Hook 函数的函数“posts”中调用了 React Hook“useSelector”。 React 组件名称必须以大写字母开头。 React Hook 名称必须以单词“use”开头 react-hooks/rules-of-hooks

这是实际错误。起初它是此错误中提到的 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;

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

React Hook "useSelector" is called in function "posts" that is neither a React function component nor a custom React Hook function

reactjs

react-redux