Javascript 无状态react函数显示无效的proptype，即使它是_Javascript_Reactjs_Mobx_React Proptypes

Javascript 无状态react函数显示无效的proptype，即使它是

javascript reactjs

Javascript 无状态react函数显示无效的proptype，即使它是,javascript,reactjs,mobx,react-proptypes,Javascript,Reactjs,Mobx,React Proptypes,我有一个无状态的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: MobxPropTyp

我有一个无状态的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;

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

目标：

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

失败的道具类型：GoalList:道具类型目标无效；信息技术必须是函数，通常来自prop types包，但是接收未定义

以及：

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

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

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

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

可观测数组的mobx prop类型为observableArray小写字母o

因此，最后你的道具类型应该如下所示：

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;

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

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

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

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

但是没有定义

但是，由于您使用的是函数而不是func，因此属性类型最终没有定义而不是函数，因此属性类型验证器无法正常工作。

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