时间戳

首页 > 解决方案 > ReactJS - PropTypes 未验证

reactjs - ReactJS - PropTypes 未验证

问题描述

PropTypes不是验证（忽略！！！）这个简单的组件，我尝试了所有方法，但它不起作用。

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";

import Item from "./Item";

import chunkArray from "../../utils/chunkArray";


const AllItems = (props) => {
  const { items, title } = props;

  const [arrayToMap, setArrayToMap] = useState([]);

  // set size array based on columns
  const arrSize = 12;

  // chunk array
  useEffect(() => {
    setArrayToMap(chunkArray(items, arrSize));
  }, [items]);


  return (
    <>
      {arrayToMap.length === 0 ? (
        <div>Wait</div>
      ) : (
        <>
          {title}
          {arrayToMap.map((x) => {
            return (
              <div className="row">
                {x.map((y, i) => (
                  <div className="col-1" key={i}>
                    <Item item={y} size={"small"} />
                  </div>
                ))}
              </div>
            );
          })}
        </>
      )}
    </>
  );
};

AllItems.propTypes = {
  items: PropTypes.array.isRequired,
  title: PropTypes.string.isRequired,
};


export default AllItems;

我可以将任何内容传递给ìtems或title 但不会停止渲染。

任何想法？

谢谢！

标签： reactjs

解决方案

您没有看到警告的原因是因为您使用道具作为组件中的参数。将您的组件更改为以下内容

const AllItems = ({ items, title }) => {}

Proptypes 不会阻止组件渲染，但您可以使用 eslint 来验证参数并阻止应用程序启动。将 eslintrc.json 文件添加到您的项目并添加以下规则。

"react/prop-types": 2,

推荐阅读