ESLint: 在 Typescript React 中，'props 验证中缺少 .map' (eslint react/prop-types)

Question

第一次发帖！

我正在使用TypeScript和React制作一个小项目。我遇到了一个问题，ESLint没有识别一个类型为string[]的prop变量通常会有一个.map函数，因为它是一个数组。

App.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;

在我的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会抛出一个错误，错误信息为'ingredientsList.map'在属性验证中缺失（eslint react/prop-types）

我不确定问题出在哪里，我会感激任何可以得到的帮助！

编辑：

在文件底部添加一个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,
};

但是对我来说，同时使用propTypes和Typescript没有意义。我知道Typescript只在编译时进行类型检查，而propTypes在运行时进行检查，但我认为两者都不必要。

在我的项目中，使用Typescript声明Prop类型非常好用，只是ESlinter会报错。我打算删除react/prop-types规则，继续使用type Props。

- edwin ramos

---

也许你可以使用这个例子向 eslint-plugin-react 存储库提交问题。看起来像是一个 bug。 - Santiago V.

Answer 1

定义 prop 的类型可以像这样：

IngredientListSearch.propTypes = {
  ingredientsList: PropTypes.arrayOf(PropTypes.string)
}

props是一个普通对象。如果您想要迭代它，请添加适当的prop类型检查。

- Muhammad Saqlain

---

这不对，应该是 IngredientListSearch.propTypes，而不是 .Props。 - Santiago V.

@SantiagoV. 使用我的类型 Props，包括一个 IngredientsListSearch.propType 在文件底部，可以让我避免问题，但似乎重复声明相同的信息有些违反直觉。有没有什么解决方法？ - edwin ramos

你可以安全地删除Props声明。 - Muhammad Saqlain

如果我删除Props声明，TypeScript会告诉我我的props具有隐式的any类型。@MuhammadSaqlain - edwin ramos

谢谢你们两位的澄清和建议，我决定禁用代码检查规则，因为在我的使用情况下遵守它没有意义。你们可以阅读我在原帖中的编辑以获得更多澄清。再次感谢！ - edwin ramos

Answer 2

在你的 .eslintrc 或 .eslintrc.js 文件中，在规则部分添加下一行（在我的情况下是 .eslintrc）：

"rules": {
  // other rules
  "react/prop-types" : "off",
}

- Giancarlo Herrera

---

这并没有解决问题，但它完全避免了该功能。 - AncientSwordRage