求助：React中如何调试‘Uncaught TypeError: Cannot read property 'func' of undefined’错误

Hey there, let's walk through how to debug this issue step by step—since you've already tried the basic setup fixes, we'll dig into targeted checks to find the root cause.

First, let's make sure your packages are playing nicely together. Run this command in your project root to check versions:

npm list react prop-types react-router

• For prop-types: If you're using React 16 or later, you need prop-types v15.7.0+ (React removed built-in PropTypes in v16, so React.PropTypes won't work at all here).
• For react-router: Note that the core react-router package is meant for non-web environments (like React Native). If you're building a web app, you should use react-router-dom instead. Fix this by swapping packages:

  npm uninstall react-router
  npm install --save react-router-dom
  

  Then update your imports to:

  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  

You mentioned using React.PropTypes.func—but since you imported PropTypes directly from the prop-types package, you need to drop the React. prefix. Update your declaration to:

ContactCreate.propTypes = {
  onCreate: PropTypes.func.isRequired // Adding .isRequired will throw explicit warnings if the prop is missing
};

Also, double-check that wherever you render ContactCreate, you're actually passing the onCreate prop. For example:

<ContactCreate onCreate={(newContact) => console.log('Creating contact:', newContact)} />

Open your browser's DevTools (F12 or Ctrl+Shift+I) and head to the Console tab—this is where React will spit out specific, actionable warnings/errors:

• Look for PropTypes warnings: They'll tell you exactly if the onCreate prop is missing, or if it's the wrong type (e.g., a string instead of a function).
• Check for react-router errors: Common issues include trying to use Link/Route outside a Router context, or misconfigured route paths.
• Scan for syntax errors: A missing comma or typo in your component could be breaking the whole thing before it renders.

If ContactCreate uses react-router components (like Link), it must be rendered inside a Router component. Make sure your app structure looks something like this:

// App.jsx
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ContactCreate from './ContactCreate';

function App() {
  return (
    <Router> {/* All router-dependent components live inside this wrapper */}
      <Route path="/contact-create" component={ContactCreate} />
    </Router>
  );
}

If ContactCreate is rendered outside the Router, react-router will throw an error about missing context.

Strip your ContactCreate component down to the bare minimum to rule out unrelated code:

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

const ContactCreate = ({ onCreate }) => {
  const testOnCreate = () => {
    if (onCreate) onCreate({ name: 'Test Contact' });
  };

  return (
    <div>
      <Link to="/">Back to Home</Link>
      <button onClick={testOnCreate}>Test onCreate Prop</button>
    </div>
  );
};

ContactCreate.propTypes = {
  onCreate: PropTypes.func.isRequired
};

export default ContactCreate;

Render this minimal version with a clear onCreate prop. If it works, gradually add back your original code until you hit the problem—this will pinpoint exactly what's causing the bug.

Run npm ls in your project root and look for "UNMET PEER DEPENDENCY" messages. These mean a package is expecting a specific version of another dependency that you don't have installed. Resolve these by updating the conflicting packages to compatible versions.

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