web-dev-qa-db-fra.com

React Props n'est pas défini

J'ai du mal à comprendre pourquoi mon props.updateBuilding ne fonctionne pas. 

Ce qui suit fonctionne quand l'accessoire est dans la méthode de rendu 

class Buildings extends Component {
  constructor(props) {
      super(props);
  }

  componentWillMount() {
    this.props.fetchBuildings();
  }

  renderBuildings(building) {
    return (
      <div>
          <p> {building.name}</p>
      </div>
    );
  }


  render() {
    return (
      <div> 
        {this.props.buildings.map(this.renderBuildings)}
        <button type="button" className="btn btn-success" onClick={this.props.updateBuilding.bind(this, 1)}>Edit</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { buildings: state.buildings.all };
}
function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchBuildings, updateBuilding}, dispatch);
}

Mais quand je mets this.props.updateBuilding à la méthode renderBuildings comme ci-dessous ... 

  renderBuildings(building) {
    return (
      <div>
          <p> {building.name}</p>
          <button type="button" className="btn btn-success" onClick={this.props.updateBuilding.bind(this, building.id)}>Edit</button>
      </div>
    );
  }

Je reçois l'erreur: 

Cannot read property 'props' of undefined

Il semble que la prop updateBuildings ne puisse pas être lue quand elle se trouve dans la méthode renderBuildings et je ne suis pas sûre de ce qui la cause. 

reactjsundefined
6
lost9123193

Dans mon cas, j'ai oublié d'ajouter props en tant qu'argument au constructeur.

constructor(props) {
  super(props);
}
15
spencer.sm

essayer: 

this.props.buildings.map(this.renderBuildings.bind(this))
2
CXNAJ

Il n'est pas recommandé de lier la fonction directement dans render ou ailleurs dans le composant, sauf dans le constructeur. Parce que pour chaque liaison de fonction, une nouvelle fonction/un objet sera créé dans le fichier js de Webpack Bundle, ce qui augmentera la taille de celui-ci. Votre composant effectuera un nouveau rendu pour différentes raisons, telles que lorsque vous définissez setState, les nouveaux accessoires reçus, lorsque vous effectuez ceci.forceUpdate (), etc. Ainsi, si vous liez directement votre fonction dans le rendu, elle créera toujours une nouvelle fonction. Au lieu de cela, reliez toujours la fonction au constructeur et appelez la référence si nécessaire. De cette façon, il ne crée une nouvelle fonction qu'une seule fois car le constructeur n'est appelé qu'une seule fois par composant.

Liez-les au constructeur et utilisez la référence comme

constructor(props){
    super(props);
    this.renderBuildings = this.renderBuildings.bind(this);
}

this.props.buildings.map(this.renderBuildings)
0
Hemadri Dasari