无状态react函数显示无效的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}/>

这就是商店中如何定义目标和选择目标：

选择目标：

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

目标：

@observable goals = [];

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

失败的prop类型： GoalList： prop类型目标无效；它必须是一个函数，通常来自prop-type包，但收到的未定义的。

和：

失败的道具类型：GoalList:道具类型onClick无效；它必须是一个函数，通常来自prop-types包，但收到的undefined

当我调试呈现GoalList的渲染函数时，我看到目标是观察数组和onClark是一个函数。我不明白为什么我一直收到这些警告。

Answer 1

这里的问题是如何定义道具类型。你的代码本身很好，我猜一切都按预期进行。

函数的属性类型是PropTypes。func，而不是PropTypes。函数，因此应修复您在单击时看到的有关的警告。

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

因此，最后您的propTypes应该如下所示：

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

警告信息有点混乱，但一旦你知道发生了什么，它就有意义了：

道具类型onClick无效；它必须是一个函数

如果提供的类型与所需类型匹配，则React PROPTYPE应该是返回true的函数。

但是没有定义

但是，由于您使用了函数而不是函数，因此PropTypes最终被未定义而不是函数，因此PropTypes验证器无法正常工作。