缺少道具中的错误映射 reactjs 属性类型

Question

我正在使用Proptypes，我得到了

道具

验证反应/道具类型中缺少错误"map"

我应该如何验证此地图？

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参数包含 props，它是一个普通对象。

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

要添加适当的道具类型检查，您需要知道（并告诉我们）道具以检查道具内部。

假设您的 ListComponent 在 prop 名称中有一个带有的项目属性，那么您应该如下所示：

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

你不能在 props 对象上有 propType，因为每个反应组件都是用 props 对象修饰的。此外，您也无法检查 ！props，因为即使您的组件中没有任何 prop，您的 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' ]} />定义组件

Answer 3

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