Question

我正在使用Proptypes，并且得到

在道具验证react / prop-types中缺少
错误'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参数包含道具，这是一个简单的对象。

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

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

比方说，您的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

Answer 2

如果要迭代道具，可以使用lodash库检查我的示例

#include"stdio.h"
void bubble(int *arr,int n,int vidx){
if(n==0)
    return;
if(vidx == n)
    bubble(arr,n-1,0);
    return;
if(*(arr+vidx) > *(arr+vidx+1)){
    int temp = *(arr+vidx);
    *(arr+vidx) = *(arr+vidx+1);
    *(arr+vidx+1) = temp;
    bubble(arr,n,vidx+1);
    return;
    }
 } int main(){
      int a[] = {5,4,3,2,1};
      bubble(&a,5,0);
      for(int i = 0 ; i < 5 ; i++)
         printf("%d,",a[i]);
      return 0; }

使用

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;

Answer 3

在props对象上不能有propTypes，因为每个无状态/有状态的React组件都用props对象装饰。另外，您也无法检查！props，因为即使您的组件中没有任何道具，您的道具也将是空对象def foo_1(): #load file and do stuff return bar_1 def foo_2(arg1): #do stuff with arg1 return bar_2 def foo_3(arg1, arg2): #do stuff with arg1 and arg2 return bar_3 def run(): arg1 = foo_1() yield arg2 = foo_2(arg1) yield arg3 = foo_3(arg1,arg2) yield for steps in run(): pass

{}

您可以在此处使用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

定义组件

缺少道具的错误映射reactjs原型

3 个答案: