初期状態をcomponentwillreceivepropsで設定しますか？

Question

イメージコンポーネントを作成していて、コンポーネント受信プロンプトに固執しています。ここで

は

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) 
    }) 
} 

私はcomponentWillReceiveProps火災がそれにthis.state.imageを設定する必要があることのImageFieldコンポーネントにJSONのブロックを送信フォームを反応させるんだ...コンポーネントの要旨ですjsonブロック。

それを設定したことがない、それはそれはthis.state.image

ためundefinedを返しますCONSOLE.LOG当たったとき、私はthis.setStateをすれば今回、それはthis.state.imageが、ドン」にJSONを書き込み、しかし、おそらくそれをやって間違った方法であるので、それをやりたい。

こんなことはどうしたらいいですか？

Answer 1

最初にコンポーネントが最初に作成されたときに、componentWillReceiveProps()が呼び出されず、コンストラクタが初期のプロップで呼び出されるため、コンストラクタの状態を初期化する必要があります。あなたがnewPropsを使用してsetState()を呼び出すように

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

次は、以下のようにcomponentWillReceiveProps()を変更します。

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

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