0
195
ViewsReaccionar - PropTypes not Enforcing isRequired
Estoy creando un componente que incluye dos accesorios. La primera es una lista de cadenas, por ejemplo ['string1', 'string2'] y la segunda es una lista de cadenas, por ejemplo [['string1arr1' ,'string2arr1'], ['string3arr2', 'string4arr2']] .
Es más o menos como se ve mi componente:
import React from 'react'; import PropTypes from 'prop-types'; export default function ComponentName (props){ //insert component code here } ComponentName.propTypes = { one: PropTypes.arrayOf(PropTypes.string).isRequired, two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired, }Cuando paso a través de un accesorio con un tipo de datos diferente, por ejemplo
<ComponentName one={123} two={'abc'} />No se produce ningún error PropTypes y el componente se ejecuta con normalidad.
He estado revisando varios tutoriales diferentes tratando de ver qué es lo que he hecho mal y, por lo que puedo ver, estoy usando poropTypes correctamente. También intenté usar requisitos más simples como one: PropTypes.string.isRequired y todavía no funcionó.
Versión de los tipos de reacción y prop instalados:
"react": "^17.0.2", "prop-types": "^15.8.1"Dependencias de Babel:
"@babel/core": "^7.16.7", "@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/preset-env": "^7.16.7", "@babel/preset-react": "^7.16.7", "babel-loader": "^8.2.3",Ahora funciona y no estoy seguro de lo que hice para arreglarlo :/
1 answers
Answer question0
parece correcto Sin embargo, no estoy seguro de si su ejemplo anterior es la misma semántica que está usando en su código. No puede declarar export default ComponentName (props) , el nombre del componente es desconocido, ni una función ni una clase. Pruebe algo como esto en su lugar y tal vez resuelva su problema:
import React from 'react'; import PropTypes from 'prop-types'; function ComponentName (props){ //insert component code here } ComponentName.propTypes = { one: PropTypes.arrayOf(PropTypes.string).isRequired, two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired, } export default ComponentName;Editar:
Tu código funciona aquí para mí:
package.json
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } App.js
import logo from "./logo.svg"; import "./App.css"; import ComponentName from "./ComponentName"; function App() { return ( <div className="App"> <header className="App-header"> <ComponentName one={["123"]} two={[["923939"]]} /> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; ComponentName.js
import React from "react"; import PropTypes from "prop-types"; export default function ComponentName() { return <div>ComponentName</div>; } ComponentName.propTypes = { one: PropTypes.arrayOf(PropTypes.string).isRequired, two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired, };