React Context API结合PropTypes类型校验报错求助

I see the issue here—you're trying to use PropTypes on component props, but the values you're accessing come from Context, not direct props passed to the components. Let's break down what went wrong and fix it step by step.

Why Your Current Code Isn't Working #

1. Incorrect PropTypes Property Name: You used App.PropTypes and Module1.PropTypes (capital P), but React expects lowercase propTypes for component prop validation.
2. Misplaced Validation:
   • The age value isn't a prop of your App component—it's part of the Context Provider's value. Defining App.propTypes for age does nothing here.
   • Module1 doesn't receive a MyAge prop at all (you're getting the value via useContext), so that propTypes entry is invalid and throws errors.

Solution 1: Validate Context Value Directly in Components #

You can use PropTypes.checkPropTypes() to validate the Context value you retrieve with useContext. Here's how to adjust your code:

Updated App.js

import React, { useState } from 'react';
import './App.css';
import Module1 from './Module1.js';
import PropTypes from 'prop-types';

// Define your Context and its expected shape
export const MyContext = React.createContext();

// Validate the Provider's value
MyContext.Provider.propTypes = {
  value: PropTypes.shape({
    age: PropTypes.number.isRequired,
    increaseAge: PropTypes.func.isRequired
  }).isRequired
};

const App = () => {
  const [age, setAge] = useState(22);
  // Fixed the logic to actually increase age (you had age-1 before!)
  const increaseAge = () => setAge(prevAge => prevAge + 1);

  return (
    <MyContext.Provider value={{ age, increaseAge }}>
      <Module1 />
    </MyContext.Provider>
  );
};

// App has no props to validate, so we can omit App.propTypes here
export default App;

Updated Module1.js

import React, { useContext } from 'react';
import { MyContext } from './App.js';
import PropTypes from 'prop-types';

const Module1 = () => {
  const contextValue = useContext(MyContext);

  // Validate the Context value when the component renders
  PropTypes.checkPropTypes(
    PropTypes.shape({
      age: PropTypes.number.isRequired,
      increaseAge: PropTypes.func.isRequired
    }),
    contextValue,
    'property',
    'MyContext'
  );

  return (
    <div>
      Your age is: {contextValue.age}
      <button onClick={contextValue.increaseAge}>Increase Age</button>
    </div>
  );
};

// Module1 has no props, so omit Module1.propTypes
export default Module1;

Solution 2: Create a Custom Context Hook (More Clean) #

For better reusability and cleaner component code, wrap the useContext call in a custom hook that includes validation and error handling:

Add to App.js

// Inside App.js, after defining MyContext
export const useMyContext = () => {
  const contextValue = useContext(MyContext);

  // Throw an error if the component is used outside the Provider
  if (!contextValue) {
    throw new Error('useMyContext must be used within a MyContext.Provider');
  }

  // Validate the Context value
  PropTypes.checkPropTypes(
    PropTypes.shape({
      age: PropTypes.number.isRequired,
      increaseAge: PropTypes.func.isRequired
    }),
    contextValue,
    'property',
    'MyContext'
  );

  return contextValue;
};

Updated Module1.js

import React from 'react';
import { useMyContext } from './App.js';

const Module1 = () => {
  // Use the custom hook instead of direct useContext
  const { age, increaseAge } = useMyContext();

  return (
    <div>
      Your age is: {age}
      <button onClick={increaseAge}>Increase Age</button>
    </div>
  );
};

export default Module1;

This approach ensures any component using useMyContext will automatically get validated Context values, and you'll get clear error messages if the Context shape is wrong or if you forget to wrap components in the Provider.

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