React Hooks组件Props传递、校验与默认值生效问题排查

你的代码存在4个核心问题，是导致功能失效的原因：

• 三元判断逻辑完全无效：props.strName === props.strName是恒真表达式，任何值和自身严格相等都返回true，永远不会走到渲染默认值的分支。另外要注意：React的PropTypes仅会在开发环境控制台抛出类型警告，不会自动拦截错误类型的prop，也不会在类型错误时自动替换为defaultProps，defaultProps仅在对应prop完全未传入时生效，传入错误类型的值不会触发默认值替换。
• Prop命名前后不匹配：组件内接收、使用的prop名为strName/num/arr，但defaultProps中定义的key是Name/preferredCities/age，名称完全不对应，默认值根本无法被匹配读取。
• 校验规则配置不全：仅配置了三个prop的基础类型校验，没有实现Age取值需大于18、小于60的规则，且preferredCities的校验多余加了isRequired，和你要求校验不通过渲染默认值的逻辑冲突。
• 渲染逻辑错误：直接写{props.arr}渲染数组会触发React报错，对象/数组类型不能直接作为子元素渲染，需要遍历输出。

首先确保已引入prop-types依赖：

import PropTypes from 'prop-types';

const Person = (props) => {
  // 手动做校验兜底，不符合规则直接使用默认值
  const validName = typeof props.name === 'string' ? props.name : Person.defaultProps.name;
  const validCities = Array.isArray(props.preferredCities) ? props.preferredCities : Person.defaultProps.preferredCities;
  const isAgeValid = typeof props.age === 'number' && props.age > 18 && props.age < 60;
  const validAge = isAgeValid ? props.age : Person.defaultProps.age;

  return (
    <ul>
      <li>姓名：{validName}</li>
      <li>年龄：{validAge}</li>
      <li>
        偏好城市：
        <ul>
          {validCities.map((city, index) => <li key={index}>{city}</li>)}
        </ul>
      </li>
    </ul>
  );
};

// 完整配置校验规则，年龄使用自定义校验器
Person.propTypes = {
  name: PropTypes.string,
  preferredCities: PropTypes.array,
  age: (props, propName, componentName) => {
    const value = props[propName];
    if (typeof value !== 'number' || value <= 18 || value >= 60) {
      return new Error(
        `组件${componentName}的属性${propName}校验失败：年龄必须是18-60之间的数值`
      )
    }
  }
};

// 默认值key和prop名严格对应
Person.defaultProps = {
  name: "Steve",
  preferredCities: ['Chennai', 'BLR'],
  age: 18
};

function App() {
  return (
    <div className="App">
      {/* 测试传入错误类型/不符合规则的值，会自动兜底渲染默认值 */}
      <Person name={18} age={16} preferredCities="上海" />
    </div>
  );
}

export default App;

• 统一了全链路的prop命名，避免默认值匹配失效
• 移除了恒真的无效三元判断，在组件内部实现手动校验兜底，只要传入值不符合规则就直接渲染默认值，完全匹配需求
• 补充了年龄的自定义校验规则，不符合规则时会在控制台抛出明确的错误提示
• 对数组类型的偏好城市做遍历渲染，避免React渲染报错
• 调整默认值配置，和要求的默认值完全一致

内容的提问来源于stack exchange，提问作者dev_to_be