ライフサイクルメソッドを使用してこれをどのように解析する必要がありますか?
{"blocks":[{
"key":"33du7",
"text":"Hello there!",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[],
"entityRanges":[],
"data":{}}],
"entityMap":{}
}
コンポーネントでテキストをレンダリングしたいのですが、なぜ未定義のエラーがスローされるのかわかりません。どうすればいいですか?
これは私のコンポーネントです:
class Blog extends Component{
constructor(props){
super(props);
this.blogContent = props.blogContent;
this.blogId = props.blogId;
this.handleRemoveBlog = this.handleRemoveBlog.bind(this);
this.state = {
blog__: '',
};
}
handleRemoveBlog(blogId){
this.props.removeBlog(blogId);
}
これは私のライフサイクルメソッドです。this.setStateを使用しますが、まず最初にコンソールで未定義になります。
componentWillMount(){
this.state.blog__ = JSON.parse(this.blogContent);
console.log(this.state.blog__.text); // this gives undefined
}
これがレンダリングパーツです。 データはFirebaseから取得されます。 そして、{this.blogcontent}は、前述のjson文字列を提供します。
render(props) {
return(
<div className = "blog header">
<p>{this.blog__.text}</p>
</div>
);
}
}
Blog.proptypes = {
blogContent: Proptypes.string
}
回答 3 件
を使用して状態を変更しないでください
this.state.blog__ = JSON.parse(this.blogContent);
適切な方法は
this.setState()
を使用することです 方法:this.setState({blog__: JSON.parse(this.blogContent)})
次に、コンポーネントが確実に再レンダリングされるように、メソッド
shouldComponentUpdate()
を使用します :shouldComponentUpdate(nextProps,nextState) { if(nextState != this.state) { this.forceUpdate() } }
StateとLifecycleのドキュメントをご覧ください。
その他のポイント:
componentDidMount()
を使用するcomponentWillMount()
の代わりに 、今後廃止される予定です。Atention: The
setState()
非同期メソッドです。そのため、状態は即座に更新されません。this.setState({})
を使用する あなたのcomponentWillMount
で 関数は代わりにデータを変数に割り当てます。また、componentDidMount
を使用することをお勧めしますcomponentWillMount
の代わりに 将来廃止されるからです。componentDidMount(){ let text = JSON.parse( this.blogContent ); this.setState({blog__: text }); }
編集:@brandNewコメントに従って、componentDidMountでsetStateのみを使用します
関連記事
- Reactコンポーネントは、オブジェクト内の1つのアイテムのみをレンダリングします
- React Jsのリンクを使用して、オブジェクトをあるページから別のページに渡します
- Reactでオブジェクトを反復処理する
- 配列を含むReactマップオブジェクト
- React 1686 +反応データテーブルエラーTypeError:Object(…)は関数ではありません
- 反応:オブジェクト内のオブジェクトを使用して関数を呼び出す
- Reactフックの状態オブジェクト内にオブジェクトキーを設定する方法
- React useStateは、マージする代わりに状態オブジェクトを上書きします
- "の解析方法反応ネイティブで
- JavaScriptを使用してJSONオブジェクトの一部を解析および保存する方法
関連した質問
- Reactjsでapi変数と動的js変数を使用してuseState定数変数を設定する方法
- reactjsのjson配列から単一のアイテムを選択します
- reactjsにアイテムを追加した後、更新せずにテーブルを更新する
- jsonから特定のコンテンツをレンダリングする
- Javascript Fetch APIPUTリクエスト
- Toughtアイテムが設定されていても、呼び出されたときにReactuseStateアイテムが空のようです
- JSON辞書child_items配列が存在する場合はマップを試行します
- ユニークな「鍵」小道具。警告まだ私は鍵を持っています
- React:ネストされたJSONデータをレンダリングするにはどうすればよいですか?
- axiosputを使用してJSONをASPNETコントローラーに送信する方法
これは主に、このオブジェクトの取得元に依存します。ネットワーク経由で取得した場合、渡すのに最適な場所は
componentDidMount
です 。この理由は、代替ライフサイクルメソッド(componentWillMount
)は、コンポーネントの再レンダリングを保証しません。非同期メソッドが実行を完了するのを待たずに、レンダリングメソッドに制御を渡すためです。したがって、componentDidMount
新しいprops
としてすぐに 受信またはstate
変更されると、再レンダリングがトリガーされます。ただし、このオブジェクトがアプリケーション内からプルされた場合、可能性はありますが、componentWillMount
内でプルされても正常に機能します 。これは、その操作がはるかに高速になり、新しいprops
を使用してrenderメソッドに制御が渡されるためです。 。state
を設定する場合は特に保証されません プロセス内(設定状態も非同期であるため、必要なすべてのデータが受信される前に制御が残りのコードを実行する場合があります)。要するに、これを
componentDidMount
に渡す レンダリング関数で、このプロップにアクセスする前に、それが存在することを確認してください。つまり、代わりにむしろする:
これはあなたがそれをする方法です(axiosを使用してネットワーク経由でファイルを取得していると仮定)