PropTypes ont toujours tort

Question

composante App - ensemble de données data.json, envoyer des accessoires pour composants enfants:

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> 
     ); 
    } 
} 

premier enfant, accessoires de diviser pour approporiate composants, donnez-moi l'erreur aussi:

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 
}; 

Et grand-enfant. Ils me donner cette étrange erreur trop

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 
}; 

Et j'ai un avertissement (console et jest m'a donné cela):

warning.js: 35 Avertissement: Type: accessoire Echec accessoire non valide like de type function fourni à DisplayData, attendu number. dans DisplayData (créé par HeaderPanel) dans HeaderPanel (créé par App) dans div (créé par App) dans div (créé par App) dans l'App

Je ne comprends pas. Mon propTypes doit être le numéro (dans le composant grand-enfant). Mais même si je le change en func, je préviens que cela devrait être un nombre. Je sais qu'avec func je devrais utiliser .isRequire en raison de undefined, mais ici? Je n'ai même aucune idée de ce qui ne va pas. J'ai vu des sujets similaires, mais ils sont environ funcprop type (et comme je l'ai compris en ajoutant .isRequire m'aidera) ou une mauvaise orthographe.

Answer 1

J'ai mis à jour ma question.

Hmm, c'est étrange, mais on dirait que tout va bien. Il semble que pendant l'envoi des accessoires d'un composant à un autre, ils changent de type. Après le rendu, ils sont fonction et ensuite consola montrer cet avertissement. Mais à la fin, ils changent de nombre, tout va bien.