React: Uncaught TypeError zwischen Eltern und Kind

Question

Ich habe eine Komponente in ein Eltern-Kind-Element aufgeteilt. Ich übermittle Daten vom Eltern zum Kind über Zustände, aber empfing ein Uncaught TypeError: Kann Eigenschaft "imageSource" null nicht lesen, die ungerade ist, weil ich den gleichen Prozess wie ein anderes Element der Anwendung folge. Ich habe auch die Dokumentation zu Komponenten und Requisiten verfolgt, bin aber immer noch etwas ratlos.

Wenn ich den Status definiert, festgelegt und dem Kind als Eigenschaft hinzugefügt habe, wieso ist der Status immer noch null?

class Parent extends React.Component { 

constructor(){ 
    super(); 
    this.state = { 
    imageSource: [], 
    imageTitles: [], 
    } 
} 

componentDidMount(){ 

... 
... 
// grabbing stuff from Dropbox API 
... 
... 

    .then(function(){ 
    that.setState({ 

     imageSource: sources, 
     imageTitles: titles, 

    }); 
    }); 



render(){ 
    return(
     <Child imageSource={this.state.imageSource} imageTitles= 
     {this.state.imageTitles} /> 
    ); 
} 
} 



class Child extends React.Component{ 

render(){ 
    if(!this.state.imageSource.length) 
     return null; 

     let titles = this.state.imageTitles.map((el, i) => <p>{el}</p>) 

     let images = this.state.imageSource.map((el, i) => 

     <div className="imageContainer"> 
      <img key={i} className='images' src={el}/> 
      <div className="imageTitle">{titles[i]}</div> 
     </div> 
     ) 

    return (
     <div className="ChildWrapper"> 
     {images} 
     </div> 
    ); 
    } 
} 

Answer 1

Im Kind erhalten Sie die Variablen als Requisiten (nicht Staat).

In Ihrem Fall sollten Sie diesen Code arbeiten

if(!this.props.imageSource.length) 
    return null; 

    let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>) 

    let images = this.props.imageSource.map((el, i) => 

    <div className="imageContainer"> 
     <img key={i} className='images' src={el}/> 
     <div className="imageTitle">{titles[i]}</div> 
    </div> 
    ) 

einen Blick auf diese Frage nehmen, ich denke, es wird Ihnen helfen, die Unterschiede zu verstehen.

What is the difference between state and props in React?

Answer 2

Paar Dinge auffallen. Dieses Stück Code hier:

class Child extends React.Component{ 

render(){ 
    if(!this.state.imageSource.length) 
     return null; 

ist falsch, weil Ihr Kind Komponente kein Staat hat. Sie deklarieren keinen Status in Ihrer Komponente Child, und Sie sollten es wahrscheinlich nicht tun. Was es hat ist Requisiten von der Parent Komponente weitergegeben. Dies ist ein kritischer Teil des Lernens. Was Sie hier überprüfen möchten, ist if(!this.props.imageSource.length) und bearbeiten Sie Ihren zusätzlichen Code, der this.state aufruft und durch this.props ersetzen.

Eine andere Sache, die ich bemerkt, ist dies:

that.setState({ 

     imageSource: sources, 
     imageTitles: titles, 

    }); 

Warum that.setState({...})? Das ist verwirrend, und es gibt wirklich keinen Grund, warum du es jemals nennen solltest. Es sollte immer this.setState({...}) sein Wenn Sie eine Neubindung von this machen, tun Sie etwas falsch, da das nicht immer der Fall sein sollte und zu Fehlern ziemlich leicht führen kann.