React子组件向主组件传参报错：无法读取handleSelectedUser属性

Hey there! Let's break down why you're hitting this error when rendering your User component in a map function, while your ContactDetail component works fine with the same prop-passing pattern.

Most Likely Causes & Fixes #

1. this Context is Broken in Your map Callback #

The #1 culprit here is usually that the regular function you're using in map doesn't inherit the component's this context. When you write:

// ❌ Bad: Regular function loses component's `this`
yourUsersArray.map(function(user) {
  return <User 
    key={user.id} 
    user={user} 
    handleSelectedUser={this.handleSelectedUser} 
  />;
});

The this inside the map callback isn't pointing to your component instance anymore—so this.handleSelectedUser is undefined.

Fix it with an arrow function (arrow functions inherit the outer this context):

// ✅ Good: Arrow function preserves component's `this`
yourUsersArray.map((user) => {
  return <User 
    key={user.id} 
    user={user} 
    handleSelectedUser={this.handleSelectedUser} 
  />;
});

Alternatively, you could store the component's this in a variable before the map:

const that = this;
yourUsersArray.map(function(user) {
  return <User 
    key={user.id} 
    user={user} 
    handleSelectedUser={that.handleSelectedUser} 
  />;
});

2. Your handleSelectedUser Method Isn't Bound to the Component #

If you're using a class component, regular class methods don't automatically bind this to the component instance. Even if your map callback is correct, accessing this.handleSelectedUser will fail if the method isn't bound.

Fix options:

• Bind in the constructor:

  class ContactsApp extends React.Component {
    constructor(props) {
      super(props);
      // Bind the method to the component instance
      this.handleSelectedUser = this.handleSelectedUser.bind(this);
    }
  
    handleSelectedUser(user) {
      // Your logic here
    }
  
    render() { /* ... */ }
  }
  

• Use an arrow function for the method:

  class ContactsApp extends React.Component {
    // Arrow function auto-binds `this` to the component
    handleSelectedUser = (user) => {
      // Your logic here
    }
  
    render() { /* ... */ }
  }
  

Why ContactDetail Works #

Chances are, you're rendering ContactDetail directly in your render method (not inside a map with a regular function), so the this context there is still pointing to your component. For example:

// This works because `this` is the component instance here
<ContactDetail 
  user={selectedUser} 
  handleSelectedUser={this.handleSelectedUser} 
/>

Quick Checklist #

1. Swap any regular functions in your map for arrow functions.
2. Ensure handleSelectedUser is properly bound to your component instance (either via constructor bind or arrow method).
3. Double-check that yourUsersArray is defined and not null/undefined (though the error message points to handleSelectedUser, so this is less likely).

内容的提问来源于stack exchange，提问作者Гриша Кисенко