ReactJS - PropTypes not validating

Question

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，但不会停止渲染。

知道吗？

谢谢！

Answer 1

重新渲染组件与proptypes无关，这是因为您在useEffect函数中设置状态时没有任何条件。因此该组件将在无限循环的渲染中工作。你可以在这里阅读

你需要添加一些条件来设置你的状态，如下所示：

useEffect(() => {
if(arrayToMap.length === 0 && items.length > 0){
setArrayToMap(chunkArray(items, arrSize));
}
}, [items]);

因此，如果您的状态为清除状态，并且items数组不为空，则该条件将起作用。

Answer 2

您没有看到警告的原因是因为您在组件中使用了props作为参数。将组件更改为以下

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

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

"react/prop-types": 2,