Accès aux accessoires dans React: Impossible de lire la propriété *** de undefined

Question

Je suis en train de décoller à React. Les accessoires semblent être accessibles. Semble ne pas aimer "ceci" dans Inventory.js. Qu'est-ce que je fais mal?

app.js

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Inventory from './Inventory'; 
import ChangeForm from './ChangeForm'; 

class App extends Component { 
    constructor() { 
    super(); 

    this.addEntryToState = this.addEntryToState.bind(this); 

    this.state = { 
     entries: {}, 
    }; 
    } 

    addEntryToState(entry) { 
    const entries = {...this.state.entries}; 
    const timestamp = Date.now(); 
    entries[`entry-${timestamp}`] = entry; 
    this.setState({ entries: entries }) 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     <ChangeForm addEntryToState={this.addEntryToState} entries={this.state.entries} /> 
     <Inventory entries={this.state.entries} /> 
     <p></p> 
     </div> 
    ); 
    } 
} 

export default App; 

Inventory.js

import React from 'react'; 

class Inventory extends React.Component { 

    render() { 
    return (

     <div> 
     <h2>Inventory</h2> 
     <p>{this.props.entries[0].name</p> 
     <p>{this.props.entries <-----*********** how to display? ****}</p> 
     <p>table removed because errors</p> 

     </div> 
    ) 
    } 
} 

export default Inventory; 

ChangeForm.js

import React from 'react'; 

class ChangeForm extends React.Component { 
    createEntry(event) { 
    event.preventDefault(); 
    const entry = { 
     name: this.name.value, 
     quantity: this.quantity.value, 
     size: this.size.value, 
    } 
    this.props.addEntryToState(entry); 
    this.changeForm.reset(); 

    } 

    render() { 
    return (
     <div> 
     <h2>Change Form</h2> 
     <form ref={(input) => this.changeForm = input} onSubmit={(e) => this.createEntry(e)}> 
      <input ref={(input) => this.name = input} type="text" placeholder="name" /> 
      <input ref={(input) => this.quantity = input} type="text" placeholder="quantity" /> 
      <input ref={(input) => this.size = input} type="text" placeholder="size" /> 
      <button type="submit">Submit</button> 
     </form> 

     </div> 
    ) 
    } 
} 

export default ChangeForm; 

Message d'erreur:

TypeError: Cannot read property 'name' of undefined Inventory.render src/Inventory.js:11

8 | 
    9 | <div> 
    10 | <h2>Inventory</h2> 
> 11 | <p>{this.props.entries[0].name}</p> 
    12 | <p>table removed because errors</p> 
    13 | 
    14 | </div> 

View compiled ▶ 26 stack frames were collapsed. Object../src/index.js src/index.js:7

4 | import App from './App'; 
    5 | import registerServiceWorker from './registerServiceWorker'; 
    6 | 
> 7 | ReactDOM.render(<App />, document.getElementById('root')); 
    8 | registerServiceWorker(); 
    9 | 
    10 | 

Answer 1

Vous obtenez l'erreur, car l'hélice entries est réglé sur un objet, pas un tableau. Voir

this.state = { 
    entries: {}, 
}; 

dans App.js. Les entrées sont un objet, pas un tableau. Vous devez modifier votre code pour créer un tableau entries à la place.

Par exemple:

this.state = { 
    entries: [], 
};