web-dev-qa-db-fra.com

React: PropTypes dans le composant fonctionnel sans état

Dans React, j’ai écrit un composant fonctionnel sans état et je souhaite maintenant y ajouter la validation Prop Type.

List composant:

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

function List(props) {
  const todos = props.todos.map((todo, index) => (<li key={index}>{todo}</li>));
  return (<ul></ul>);
}

List.PropTypes = {
  todos: PropTypes.array.isRequired,
};

export default List;

App composant, rendant List:

import React from 'react';
import List from './List';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: '',
    };
  }

  render() {
    return (<List todos={this.state.todos} />);
  }
}

export default App;

Comme vous pouvez le voir dans App, je passe this.state.todos à List. Puisque this.state.todos est une chaîne, je m'attendais à ce que la validation du type de propriété commence. Je reçois une erreur dans la console du navigateur, car les chaînes n'ont pas de méthode appelée map.

Pourquoi la validation du type d’application ne fonctionne-t-elle pas comme prévu? Jetez un oeil à cette question , le cas semble identique.

reactjsreact-proptypes
30
Sven

Tu devrais changer

List.PropTypes = {
  todos: PropTypes.array.isRequired,
};

à

List.propTypes = {
  todos: PropTypes.array.isRequired,
};

(instance d'un objet PropTypes est en minuscule, mais Class/Type est en majuscule. L'instance est List.propTypes. La classe/type est PropTypes.)

61
Bhargav Ponnapalli