En React, escribí un componente funcional sin estado y ahora quiero agregarle la validación Prop Type.
Componente List :
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; Componente de la App , List de representación:
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; Como puede ver en App , estoy pasando this.state.todos a List . Dado que this.state.todos es una cadena, esperaba que se activara la validación Prop Type. En cambio, aparece un error en la consola del navegador porque las cadenas no tienen un método llamado map .
¿Por qué la validación del tipo de propiedad no funciona como se esperaba? Echando un vistazo a esta pregunta , el caso parece idéntico.
Debe cambiar la carcasa de la propiedad a propTypes :
- List.PropTypes = { + List.propTypes = { todos: PropTypes.array.isRequired, };Correcto :
List. propTypes = { todos: PropTypes.array.isRequired, }; (La instancia de un objeto PropTypes está en minúsculas, pero la Clase/Tipo está en mayúsculas. La instancia es List.propTypes . La Clase/Tipo es PropTypes ).