[英]ESLint: '.map is missing in props validation' (eslint react/prop-types) in Typescript React
First time posting!第一次发帖!
I'm using Typescript with React to make a small project.我正在使用 Typescript 和 React 来制作一个小项目。 I'm having an issue with ESLint not recognizing that a prop variable with the type
string[]
would normally have a.map function because its an array.我遇到了 ESLint 的问题,它无法识别类型为
string[]
的 prop 变量通常具有 a.map function 因为它是一个数组。
App.tsx应用程序.tsx
import React, { useState } from 'react'
function App() {
const [ingredientsList, setIngredientsList] = useState<string[]>([]);
return (
<div className="App">
<Route path="/" exact render={() => <IngredientListSearch ingredientsList={ingredientsList} setIngredientsList={setIngredientsList} />} />
<Route path="/about" exact component={About} />
</div>
);
}
export default App;
in my IngredientListSearch.tsx在我的 IngredientListSearch.tsx
import React, { useState } from 'react';
// ... bootstrap imports
type Props = {
ingredientsList: string[]
setIngredientsList: (arr: string[]) => void
}
function IngredientListSearch({ ingredientsList, setIngredientsList }: Props) {
// state hooks
const [searchTerm, setSearchTerm] = useState<string>('');
// ... miscellaneous logic functions
// function with error in question
function makeIngredientItems() {
return (
<>
<p>Included Ingredients:</p>
<ListGroup variant="flush">
// piece of code in question
{ingredientsList.map((name, index) => (
<ListGroup.Item key={index} variant="info">
// ... Item details here
</ListGroup.Item>
))}
</ListGroup>
</>
);
}
return (
<>
//... html elements that work fine
<div className="ingredient-list-container">
{
ingredientsList.length === 0
? <p>Add some Ingredients to get started!</p>
: makeIngredientItems()
}
</div>
<div />
</div>
</>
);
}
export default IngredientListSearch;
ESLint will throw me an error with the message 'ingredientsList.map' is missing in props validation (eslint react/prop-types)
ESLint 会抛出一个错误消息
'ingredientsList.map' is missing in props validation (eslint react/prop-types)
I'm not really sure what the issue is, I would appreciate any help I can get!我不太确定问题是什么,如果能得到任何帮助,我将不胜感激!
Edit:编辑:
Adding an IngredientListSearch.propTypes
to the bottom of the file in conjunction with my Props use solved my linter error like so.将
IngredientListSearch.propTypes
添加到文件底部并结合我的 Props 使用解决了我的 linter 错误,如下所示。
type Props = {
ingredientsList: string[],
setIngredientsList: (arr: string[]) => void
}
function IngredientListSearch({ ingredientsList, setIngredientsList }: Props) {
//... component
}
IngredientListSearch.propTypes = {
ingredientsList: PropTypes.arrayOf(PropTypes.string).isRequired,
setIngredientsList: PropTypes.func.isRequired,
};
But it didn't make sense to me to be using both propTypes and Typescript.但是对我来说同时使用 propTypes 和 Typescript 没有意义。 I understand Typescript only type checks at compile while propTypes checks at runtime, but I don't believe both are necessary.
我了解 Typescript 仅在编译时进行类型检查,而 propTypes 在运行时检查,但我认为两者都不是必需的。
My project works just fine declaring a Prop type with Typescript, and its just the ESlinter yelling at me.我的项目工作得很好,用 Typescript 声明了一个 Prop 类型,它只是 ESlinter 对我大喊大叫。 I'm going to just remove the
react/prop-types
rule and continue to use type Props
.我将删除
react/prop-types
规则并继续使用type Props
。
Define type of prop like this:像这样定义道具的类型:
IngredientListSearch.propTypes = {
ingredientsList: PropTypes.arrayOf(PropTypes.string)
}
The props
is a plain object. props
是一个普通的 object。 If you want to iterate over it add a proper prop-type check.如果您想对其进行迭代,请添加适当的道具类型检查。
In your.eslintrc or.eslintrc.js, add the next line in rule section (in my case is.eslintrc):在 your.eslintrc 或.eslintrc.js 中,在规则部分添加下一行(在我的例子中是.eslintrc):
"rules": {
// other rules
"react/prop-types" : "off",
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.