Reactjs 道具类型总是错误的

App component-从data.json设置数据，向子组件发送道具：

import React from 'react';
import axios from 'axios';

import { HeaderPanel, PostsPanel } from './index';

import './app.scss';

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            userData: Object,
            infoData: Object,
            postsData: Object
       };
    }

    componentDidMount() {
        axios.get('./data.json') 
            .then(res => {
                this.setState({ 
                    userData: res.data.userData,
                    infoData: res.data.infoData,
                    postsData: res.data.posts
                });  
            });
    }

    render() {
        return (
            <div className="app">
                <div>
                    <HeaderPanel
                        userData={this.state.userData}
                        infoData={this.state.infoData}
                    />
                </div>
                <div className="posts">
                    <PostsPanel postsData={this.state.postsData} />
                </div>            
            </div>
        );
    }
}

从“React”导入React；
从“axios”导入axios；
从“/index”导入{HeaderPanel，PostsPanel}；
导入“/app.scss”；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
此.state={
userData:Object，
infoData:Object，
postsData:对象
};
}
componentDidMount（）{
get（'./data.json'）
。然后（res=>{
这个.setState（{
userData:res.data.userData，
infoData:res.data.infoData，
postsData:res.data.posts
});  
});
}
render（）{
返回(
);
}
}

第一个孩子，把道具分成合适的部件，也给我错误：

import React from 'react';
import PropTypes from 'prop-types';

import {ModalContainer, ModalDialog} from 'react-modal-dialog';

import { TopFunctionPanel, TopDisplayData } from './topPanel';
import { MiddleFunctionPanel, MiddleDisplayData } from './middlePanel';

import './headerPanel.scss';

export default class HeaderPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            avatar: Object,
            user: String,
            city: String,
            country: String,
            like: Number,
            following: Number,
            followers: Number,
            isOpen: false
        };

        this.setLike = this.setLike.bind(this);
        this.setFollowers = this.setFollowers.bind(this);
        this.toggleModalWindow = this.toggleModalWindow.bind(this);
    }

    componentWillReceiveProps(props) {
           this.setState({
                avatar : props.userData.avatar,
                user: props.userData.user,
                city: props.userData.city,
                country: props.userData.country,
                like : props.infoData.like,
                following: props.infoData.following,
                followers: props.infoData.followers,
            });
     }

    setLike(val) {
        this.setState({like: val});
    }

    setFollowers(val) {
        this.setState({followers: val});
    }

    toggleModalWindow() {
        this.setState({isOpen: !this.state.isOpen});
    }

    render() {
        return (
            <div className="headerPanel">
          {
                this.state.isOpen &&
                <ModalContainer onClose={this.toggleModalWindow}>
                  <ModalDialog onClose={this.toggleModalWindow}>
                            <div className="modal">
                                <div> 
                                    <div><h1>You share:</h1></div>
                                </div>
                                <p>{window.location.href}</p>
                            </div>
                  </ModalDialog>
                </ModalContainer>
              }
                <TopFunctionPanel
                    setLike={this.setLike}
                    like={this.state.like}
                    toggleModalWindow={this.toggleModalWindow}
                />
                <TopDisplayData
                    avatar={this.state.avatar}
                    user={this.state.user}
                    city={this.state.city}
                    country={this.state.country}
                />
                <MiddleDisplayData
                    like={this.state.like}
                    following={this.state.following}
                    followers={this.state.followers}
                />
               <MiddleFunctionPanel
                    setFollowers={this.setFollowers}
                    followers={this.state.followers}
                />
            </div>
        );
    }
}

HeaderPanel.propTypes = {
    userData: PropTypes.object,
    infoData: PropTypes.object
};

从“React”导入React；
从“道具类型”导入道具类型；
从“反应模态对话框”导入{ModalContainer，ModalDialog}；
从“/topPanel”导入{TopFunctionPanel，TopDisplayData}；
从“/middlePanel”导入{MiddleFunctionPanel，MiddleDisplayData}；
导入“/headerPanel.scss”；
导出默认类HeaderPanel扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
阿凡达：对象，
用户：字符串，
城市：字符串，
国家：字符串，
比如：数字，
以下：编号：，
追随者：人数，
伊索彭：错
};
this.setLike=this.setLike.bind（this）；
this.setFollowers=this.setFollowers.bind（this）；
this.toggleModalWindow=this.toggleModalWindow.bind（this）；
}
组件将接收道具（道具）{
这是我的国家({
化身：props.userData.avatar，
用户：props.userData.user，
城市：props.userData.city，
国家：props.userData.country，
like:props.infoData.like，
following:props.infoData.following，
追随者：props.infoData.followers，
});
}
setLike（val）{
this.setState（{like:val}）；
}
setFollowers（val）{
this.setState（{followers:val}）；
}
toggleModalWindow（）{
this.setState（{isOpen:！this.state.isOpen}）；
}
render（）{
返回(
{
这个州&&
你分享：
{window.location.href}

}
);
}
}
HeaderPanel.propTypes={
userData:PropTypes.object，
infoData:PropTypes.object
};

还有孙子。他们也给了我这个奇怪的错误

import React from 'react';
import PropTypes from 'prop-types';

import './middlePanel.scss';

const DisplayData = ({ like, following, followers }) => {

    return (
        <div className="middleDisplayData">
            <div>
                <p>{like}</p>
                <p>Liks</p>
            </div>
            <div>
                <p>{following}</p>
                <p>Following</p>
            </div>
            <div>
                <p>{followers}</p>
                <p>Followers</p>
            </div>
        </div>
    );
};

export default DisplayData;

DisplayData.propTypes = {
    like: PropTypes.number,
    following: PropTypes.number,
    followers: PropTypes.number
};

从“React”导入React；
从“道具类型”导入道具类型；
导入“/middlePanel.scss”；
const DisplayData=（{like，follower，followers}）=>{
返回(
{like}

喜欢

{following}

跟随

{追随者}

追随者

);
};
导出默认显示数据；
DisplayData.propTypes={
比如：PropTypes.number，
下面是：PropTypes.number，
追随者：PropTypes.number
};

我有一个警告（

console

和

jest

给了我这个）：

警告.js:35警告：失败的道具类型：无效的道具

类型
功能
提供给
DisplayData
，应为
number
。
显示数据中（由HeaderPanel创建）
在HeaderPanel中（由应用程序创建）
在div中（由应用程序创建）
在div中（由应用程序创建）
应用程序内

我不明白。My
propTypes
应该是数字（在grand child组件中）。但即使我将其更改为
func
，我也警告它应该是数字。我知道使用
func
我应该使用
.isRequire
，因为
未定义
，但是这里呢？我甚至不知道怎么了。我看到过类似的主题，但它们是关于
func
prop
类型（据我所知，添加
.isRequire
会对我有所帮助）或一些拼写错误。
我更新了我的问题

嗯，很奇怪，但看起来一切都很好。看起来，在将道具从一个组件发送到另一个组件的过程中，它们会改变类型。渲染后，它们将运行，然后控制台显示此警告。但最后它们变成了数字，所以一切都很好

我更新了我的问题

嗯，很奇怪，但看起来一切都很好。看起来，在将道具从一个组件发送到另一个组件的过程中，它们会改变类型。渲染后，它们将运行，然后控制台显示此警告。但最后它们变成了数字，所以一切都很好

这可能是因为您没有扩展React.Component，而是创建了一个普通的JS对象？您应该告诉我们如何渲染组件以及向其中传递哪些道具。这看起来是明显的直接错误。在某个地方，您正在使用
，并且向组件传递了错误的道具。你能三重检查一下吗？可能是因为你没有扩展React.Component，而是创建了一个普通的JS对象。你应该告诉我们你是如何渲染组件的，以及你传递给它的道具。这看起来是一个明确的错误。您正在使用