当对象类型内部缺少元素时，React proptypes 不会发出警告

Question

我有一个非常简单的网站来演示我的问题。

App.js

import React, {useRef, useState, useEffect} from 'react'; 
import Playaround from './playaround/Playaround';

function App() {
  const person = {
    name: "joe",
    age: 52,
    random: {
      text: "some random stuff"  
    }
  }

  return <Playaround {...person}/>

}

export default App;

Playaround.js

import React, { useState, useEffect, useRef, useReducer, useContext } from "react";
import Proptypes from 'prop-types';


export default function Playaround({name,age,random}) {


    return <div>
        <h1>{name}</h1>
        <h1>{age}</h1>
        <h1>{random.text}</h1>
        <h1>{random.missing}</h1>
    </div>
}

Playaround.propTypes = {
    name: Proptypes.string.isRequired,
    age: Proptypes.number.isRequired,
    random: Proptypes.object.isRequired,
}

如果未定义姓名、年龄或随机数，控制台将给出适当的警告。然而，在“Playaround.js”中，当我输入{random.missing}时，虽然随机对象没有键“missing”，但控制台没有给出任何警告。如果缺少重要数据，将很难配置。我该如何处理它并让控制台显示警告？

Answer 1

您可以使用 PropTypes.shape 并定义 random

的形状

Playaround.propTypes = {
  name: Proptypes.string.isRequired,
  age: Proptypes.number.isRequired,
  random: PropTypes.shape({
    text: PropTypes.string.isRequired,
    missing: PropTypes.string.isRequired
  })
}

当对象类型内部缺少元素时，React proptypes 不会发出警告

React proptypes doesn't give warning when object type has missing element inside

reactjs

react-proptypes