【问题标题】：it must be a function, usually from React.PropTypes它必须是一个函数，通常来自 React.PropTypes
【发布时间】：2020-11-30 18:09:28
【问题描述】：

我想将字符串从 Main 传递到 Header。它成功但警告。我是 React 的初学者，所以我不知道 it must be a function 是什么意思。

有人知道如何解决这个警告吗？

警告是：

我的代码如下：

Main.js

import React from 'react';

import Header from './Header';
import AppList from './AppList/AppList';
import Footer from './Footer';

const propTypes = {
  mainInfo: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    apps: React.PropTypes.array.isRequired,
  }),
};

class Main extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div>
        <Header title={this.props.mainInfo.title} />
        <AppList apps={this.props.mainInfo.apps} />
        <Footer />
      </div>
    );
  }
}

Main.propTypes = propTypes;

export default Main;

Header.js

import React from 'react';

const propTypes = {
  title: React.PropTypes.string.isRequred,
};

class Header extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div className="header">
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

Header.propTypes = propTypes;

export default Header;

【问题讨论】：

如果使this.props.mainInfo.title 只是一个字符串，警告不会改变。

标签： reactjs

【解决方案1】：

您有一个错误：React.PropTypes.string.isRequred。正确拼写isRequired，应该没问题。

【讨论】：

严重 :facepalm: 当我读到这篇文章时，它解决了我的问题。
你是救命恩人！多么了不起的收获！
是的，你做得很好！ hideModal: PropTypes.func.isRequired, !== hideModal: PropTypes.func.required,
就我而言，我写的是PropTypes.boolean而不是PropTypes.bool。
我有 isRequired.isRequired U_U

【解决方案2】：

当您的 PropType 实际上是 undefined 时会发生这种情况。

在我的例子中，我指定了 PropTypes.integer 的 propType，它不是 proptypes 列表之一。这实际上变成了undefined。相反，我应该使用PropTypes.number。

注意PropTypes.bool 与PropTypes.boolean 以及PropTypes.func 与PropTypes.function 的类似错误。

【讨论】：

啊！我只是用PropTypes.boolean 而不是PropTypes.bool 做到了。谢谢！
很好的答案，比所选答案更通用。只是用boolean 而不是bool 做到了：P
即使在阅读了这个答案之后，我仍然花了很长时间才意识到我写的是PropTypes.function而不是PropTypes.func！ ?

【解决方案3】：

另外，布尔值是 bool。我浏览了文档并遇到了完全相同的问题，直到我回去仔细阅读它们。

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

【讨论】：

【解决方案4】：

例如

React.PropTypes.sting
React.PropTypes.text

React 还可以告诉用户：“你定义的 PropType 'sting' 是未定义的。你拼错了吗？可用的 PropType 有：字符串、数字、布尔等。”

【讨论】：

我用布尔值而不是 bool 来得到这个错误:)

【解决方案5】：

就我而言，它发生在我声明 Component.propTypes 及以下时，而不是写 Component.defaultProps 我又写了 Component.propTypes 分配默认值。

【讨论】：

【解决方案6】：

只需复制和粘贴，除非您能确保不会打错字！

我也遇到了这个问题，浪费了我很多时间去解决！

所以，做个笔记吧！

VS 代码和插件

万一有错别字！

```jsx

TestModal.propTypes = {
    title: PropTypes.string,
    //badHideModal: PropTypes.func.required,
    hideModal: PropTypes.func.isRequired,
};

```

【讨论】：

我在函数和布尔属性类型方面遇到了同样的问题，它通过替换为 func 和 bool 来解决。谢谢！

【解决方案7】：

三步轻松解决问题：

步骤 1： 安装 NPM prop-types 包 (npm prop-types install)；
第 2 步： 将包导入您的文件中。

代码： import PropTypes from 'prop-types';

步骤 3： 从语句中删除 React 关键字（例如：React.PropTypes.string.isRequired to PropTypes.string.isRequired 取决于您的语句，因此只需删除 React 关键字，因为您现在是从 prop-类型，而不是来自 React 库。

【讨论】：

【解决方案8】：

类似于isRequred 而不是isRequired 的事情发生在我身上。我尝试定义默认道具，但复制粘贴了 propTypes 并且从未更改名称，所以我最终得到了这样的结果：

import PropTypes from 'prop-types'

const Main = ({ title }) => // whatever

Main.propTypes = {
  title: PropTypes.string
}

Main.propTypes = { // this should have been Main.defaultProps! ?‍♂️
  title: 'This is the default title!'
}

所以 PropTypes 抱怨 title 的道具类型不正确。它说“它必须是一个函数，通常来自 React.PropTypes 但它是一个字符串”。

我以为我快疯了。我正在查看第一个 Main.propTypes 并试图找到错字或任何可能出错的地方，但正如您所见，它完全没问题。我打开了多个定义了 prop 类型但没有抛出错误的文件。

我显然看错了地方，但最终还是不走运。我很幸运能真正找到它。这些捂脸的虫子很难弄清楚，因为它们就像魔术师在用另一只手准备魔术的同时移动一只手来吸引所有的目光，通常是显而易见的。

【讨论】：