Reactjs 缺少道具类型中的错误映射

我在使用Proptypes，而且

道具/道具类型中缺少错误“映射”

我应该如何验证此地图

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

import React，{Fragment}来自“React”
从“道具类型”导入道具类型；
常量ListComponent=props=>{
如果（！props）返回null
返回(
{props.map（（item，i）=>{item.name}）
)
}
ListComponent.propTypes={
道具：道具类型
};
导出默认列表组件

当您有一个无状态组件作为您的组件时，

props

参数包含props，它是一个普通对象

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

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

假设ListComponent中有一个项目道具，道具名称中有一个项目道具，那么您应该这样做：

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

import React，{Fragment}来自“React”
从“道具类型”导入道具类型；
常量ListComponent=（{items}）=>{
如果（！items）返回null
返回(
{items.map（（item，i）=>{item.name}）
)
}
ListComponent.propTypes={
项目：PropTypes.arrayOf(
PropTypes.shape({
名称：PropTypes.string
})
)
};
导出默认列表组件

如果您想迭代道具，可以使用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;

import React，{Fragment}来自“React”；
从“道具类型”导入道具类型；
从“洛达斯”进口；
常量ListComponent=props=>{
返回(
{{地图（道具，（物品，钥匙）=>{
返回{key}:{item}
})}
);
};
ListComponent.propTypes={
道具：道具类型
};
导出默认列表组件；

使用

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

//渲染
姓名：大卫
姓氏：zls

在props对象上不能有propTypes，因为每个react组件无状态/有状态都用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

import React，{Fragment}来自“React”
从“道具类型”导入道具类型；
常量ListComponent=props=>{
如果（！props.names）返回null
返回(
{props.names.map（（name，i）=>{name}）
)
}
ListComponent.propTypes={
名称：PropTypes.arrayOf（PropTypes.string）
};
导出默认列表组件

在这里，您可以使用