无状态反应函数显示无效的 proptype，即使它是

Question

我有一个无状态的 React 组件，看起来像这样：

import React from 'react';
import PropTypes from 'prop-types';
import Goal from './Goal'
import {List} from 'material-ui/List';
import {PropTypes as MobxPropTypes} from 'mobx-react';

const propTypes = {
    goals: MobxPropTypes.ObservableArray,
    onClick: PropTypes.function
};

const GoalsList = ({goals, onClick}) =>(
        <List>
            {goals.map((goal) => (
                <Goal
                    key={goal.name}
                    name={goal.name}
                    onClick={() => {
                        onClick(goal)
                    }}
                />
            ))}
        </List>);


GoalsList.propTypes = propTypes;
export default GoalsList;

我使用这个组件如下：

<GoalList goals={this.props.store.goals}
          onClick={this.props.store.selectGoal}/>

这就是 goals 和 selectGoal 在商店中的定义方式：

选择目标:

@action selectGoal = (goal) => {
    this.selectedGoal = goal;
}

目标:

@observable goals = [];

我仍然在控制台中收到以下警告：

Failed prop type: GoalList: prop type goals is invalid; it must be a function, usually from the prop-types package, but received undefined.

并且：

Failed prop type: GoalList: prop type onClick is invalid; it must be a function, usually from the prop-types package, but received undefined

当我调试渲染 GoalList 的渲染函数时，我看到 goals 是 ObservableArray 而 onClick 是一个函数。我不明白为什么我总是收到这些警告。

Answer 1

这里的问题是您如何定义道具类型。您的代码本身没有问题，我猜一切都按预期工作。

函数的 prop 类型是 PropTypes.func，而不是 PropTypes.function，因此应该可以修复您看到的关于 onClick.

的警告

可观察数组的 mobx 属性类型是 observableArray（小写 o）。

所以，最后你的 propTypes 应该是这样的：

const propTypes = {
    goals: MobxPropTypes.observableArray,
    onClick: PropTypes.func,
};

警告消息有点令人困惑，但一旦您知道发生了什么，它就有意义了：

prop type onClick is invalid; it must be a function

如果提供的类型与所需类型匹配，React PropTypes 应该是 return true 的函数。

but received undefined

但是，因为你有 function 而不是 func，PropTypes 最终是 undefined 而不是函数，因此道具类型验证器无法正常工作。

无状态反应函数显示无效的 proptype，即使它是

Stateless react functions shows invalid proptype even though it is

javascript

reactjs

mobx

react-proptypes