Question

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

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的定义方式：

selectGoal ：

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

目标：

@observable goals = [];

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

失败道具类型：目标列表：道具类型goals无效;它必须是一个函数，通常来自prop-types包，但是已收到undefined。

和

失败道具类型：目标列表：道具类型onClick无效;它必须是一个函数，通常来自prop-types包，但收到了 undefined

当我调试渲染GoalList的渲染函数时，我发现goals是ObservableArray而onClick是一个函数。我无法弄清楚为什么我一直收到这些警告。

Answer 1

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

函数的道具类型为PropTypes.func，而不是PropTypes.function，因此应该修正您看到的有关onClick的警告。

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

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

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

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

prop类型onClick无效;它必须是一个功能

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

但收到了未定义的

但是，因为您有function而非func，PropTypes最终变为undefined而不是函数，因此道具类型验证器无法正常工作。< / p>

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

1 个答案: