Definieren eines Benutzers mit Requisiten oder Dekonstruktion in React

Question

Neu zu Reagieren und zu versuchen, herauszufinden, wie ich {user} in meinem Code unten hinzufügen/definieren kann. Ich bekomme immer einen Fehler auf user not defined, wenn ich versuche, es auszuführen.

Mein-Code zur Zeit:

import React from 'react'; 
import { 
    Media, 
    Dropdown, 
    DropdownToggle, 
    DropdownMenu, 
    DropdownItem, 
} from 'reactstrap'; 
import PropTypes from 'prop-types'; 

class UserPreview extends React.Component { 
    toggle = ({user}) => this.setState({DropdownOpen: !this.state.DropdownOpen}); 

    render() { 
    return (
     <div> 
     <tr className="user"> 
      <td> 
      <Media> 
       <img 
       alt={`${user.name} avatar`} 
       className="avatar d-flex mr-3" 
       src={user.url} /> 
       <Media body>{user.name}</Media> 
      </Media> 
      </td> 
      <td> 
      <Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle(this)}> 
       <DropdownToggle caret> 
       Admin 
       </DropdownToggle> 
       <DropdownMenu> 
       <DropdownItem>Read</DropdownItem> 
       <DropdownItem>Write</DropdownItem> 
       </DropdownMenu> 
      </Dropdown> 
      </td> 
      <td><Button color="warning">Delete</Button></td> 
     </tr> 
     <tr> 
     </div> 
    ) 
    } 
} 

UserPreview.propTypes = { 
    user: PropTypes.shape({ 
    name: PropTypes.string, 
    // TODO: add an url proptype. 
    url: PropTypes.string, 
    }).isRequired, 
}; 

export default UserPreview; 

Answer 1

<Media> 
     <img 
      alt={`${user.name} avatar`} 
      className="avatar d-flex mr-3" 
      src={user.url} /> 
     <Media body>{user.name}</Media> 
</Media> 

Dies ist die Folge der Fehler aus, da in der Umschaltfunktion werfen Sie zum user param nicht verwenden.

Sie müssen:

<Media> 
     <img 
      alt={`${this.props.user.name} avatar`} 
      className="avatar d-flex mr-3" 
      src={this.props.user.url} /> 
     <Media body>{this.props.user.name}</Media> 
</Media> 

Oder extrahieren nur die user Stütze zu Beginn der render Methode wie:

render() { 
    let { user } = this.props; 
    . 
    . 
    . 

auch:

<Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle(this)}> 

Die toggle Stütze die Dropdown Komponente Shou ld eine Referenz auf eine Funktion sein und Sie rufen die Funktion, so dass die toggle Prop ist eigentlich undefined, da die toggle Methode keinen Wert zurückgibt.

Sie sollten die toggle prop wie dies passieren:

<Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle}> 

Und wenn Sie das user wollen als Argument an die toggle Methode gesendet werden, sollten Sie es auf diese Weise tun:

<Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle.bind(this, this.props.user)}> 

und Dann brauchen Sie die Dekonstruktion nicht, damit die Methode toggle wie folgt aussehen kann:

toggle = (user) => this.setState({DropdownOpen: !this.state.DropdownOpen});