缺少道具 reactjs proptypes 中的错误图答案

【问题标题】：error map in missing props reactjs proptypes缺少道具 reactjs proptypes 中的错误图
【发布时间】：2019-01-11 23:36:06
【问题描述】：

我正在使用 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

【问题讨论】：

标签： reactjs react-proptypes

【解决方案1】：

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

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

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

假设你的 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

【讨论】：

【解决方案2】：

你不能在 props 对象上使用 propTypes，因为每个无状态/有状态的 react 组件都用 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' ]} />定义你的组件

【讨论】：

【解决方案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

【讨论】：