Setze Anfangszustand mit componentwillreceiveprops?

Question

Ich schreibe eine Image-Komponente und kleben auf KomponenteWerkzeuge erhalten.

Hier ist der Kern der Komponente ...

class ImageField extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
    image: '', 
    imagePreviewUrl: '', 
    }; 
} 

componentWillReceiveProps(newProps){ 
    if (newProps.content === this.props.content) { 
    return; 
    } 

    this.setState({ 
    image: this.props.content 
    }, function() { 
    console.log(this.state.image) 
    }) 
} 

Ich habe eine reagieren bekam Form, die einen Block von json an die Komponente sendet Imagefield, dass, wenn componentWillReceiveProps Feuer this.state.image zu, dass setzen soll JSON Block.

aber es es nie untergeht und wenn er trifft console.log es für this.state.image

Jetzt undefined zurück, wenn ich this.setState tun zweimal schreibt es json zum this.state.image aber don‘ Ich will das machen, weil es wahrscheinlich der falsche Weg ist, es zu tun.

Stuck, was ist der richtige Weg, dies zu tun?

Answer 1

Zuerst müssen Sie den Status in Ihrem Konstruktor initialisieren, wie unten gezeigt, denn wenn die Komponente anfänglich erstellt wird, wird componentWillReceiveProps() nicht aufgerufen, stattdessen wird der Konstruktor mit den ursprünglichen Requisiten aufgerufen.

constructor(props) { 
    super(props); 
    this.state = { 
    image: props.content, 
    imagePreviewUrl: '', 
    }; 
} 

Weiter componentWillReceiveProps() ändern, wie unten, so dass Sie setState() die newProps mit aufrufen.

componentWillReceiveProps(newProps){ 
    if (newProps.content === this.props.content) { 
    return; 
    } 

    this.setState({ 
    image: newProps.content 
    }, function() { 
    console.log(this.state.image) 
    }) 
}