缺少道具 reactjs proptypes 中的错误映射

Question

我正在使用 Proptypes，我得到

error 'map' is missing in props validation react/prop-types

我应该如何验证这张地图？

import React, { Fragment } from 'react'
import PropTypes from 'prop-types';

const ListComponent = props => {
    if (!props) return null
    return (
        <Fragment>
            {props.map((item,i) => <div key={i}>{item.name}</div>)}
        </Fragment>
    )
}

ListComponent.propTypes = {
    props: PropTypes.any
};

export default ListComponent

Answer 1

当你有一个无状态组件时，props参数包含道具，它是一个普通对象。

您正试图对其进行迭代，但这是不可能的，因为它是一个对象而不是数组。

要添加正确的 prop 类型检查，您需要知道（并告诉我们）要在 props 内部检查的 prop。

假设你的 ListComponent 有一个 items 道具，里面有一个道具名称，那么你应该是这样的：

import React, { Fragment } from 'react'
import PropTypes from 'prop-types';

const ListComponent = ({ items }) => {
    if (!items) return null
    return (
        <Fragment>
            { items.map((item, i) => <div key={i}>{item.name}</div>)}
        </Fragment>
    )
}

ListComponent.propTypes = {
    items: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string
      })
    )
};

export default ListComponent

Answer 2

如果你想迭代道具你可以使用 lodash 库检查我的例子

import React, { Fragment } from "react";
import PropTypes from "prop-types";
import _ from "lodash";

const ListComponent = props => {
  return (
    <Fragment>
      {_.map(props,( item,key) => {           
        return <div key={key}>{key}: {item}</div>
      })}
    </Fragment>
  );
};

ListComponent.propTypes = {
  props: PropTypes.any
};

export default ListComponent;

使用

<ListComponent  name="david" lastName:"zls"/>
//render
name: david
lastname: zls

Answer 3

你不能在 props 对象上使用 propTypes，因为每个 React 组件 stateless/stateful 都是用 props 对象装饰的。你也不能检查 !props 因为即使你的组件中没有任何道具，你的道具也将是空对象 {}

import React, { Fragment } from 'react'
import PropTypes from 'prop-types';

const ListComponent = props => {
    if (!props.names) return null
    return (
        <Fragment>
            {props.names.map((name,i) => <div key={i}>{name}</div>)}
        </Fragment>
    )
}

ListComponent.propTypes = {
    names: PropTypes.arrayOf(PropTypes.string)
};

export default ListComponent

在这里您可以使用<ListComponent names= {['name1', 'name2' ]} />

定义您的组件

缺少道具 reactjs proptypes 中的错误映射

error map in missing props reactjs proptypes

reactjs

react-proptypes