AngularJSのようにReactJSでデータを取得した後にDOMをレンダリングする方法はありますか？ - javascript、reactjs

に変更があるときはいつでもangularJSでスコープ変数は、DOMを自動的に変更します。また、ajax呼び出しからのデータのフェッチに遅延がある場合は、データのフェッチ後にレンダリングされます。この種の問題をReactJSで解決する方法はありますか？

以下のコードを試しましたが、常に「loading ...」divが表示されます

import React from "react";
import axios from "axios";

export default class Article extends React.Component {
constructor(props) {
console.log(props);
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
axios.get(`http://www.reddit.com/r/reactjs.json`)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ posts });
console.log(posts);
});
}
render() {
const { posts } = this.props;
if (posts) {
const { title } = this.props;
const { articleName } = this.props;
console.log(this.state.posts);

return (
<div className="col-md-4">
<h4>{title}</h4>
<p>This is generated from Article Component from Article JS { title }</p>
<a className="btn btn-default" href="#">More Info</a>
<div>
{posts}
</div>
</div>
);
}
return <div>Loading...</div>;
}
}

回答：

あなたがその問題を抱えている理由は、あなたが小道具を使って投稿をチェックしているからです

const { posts } = this.props;

この投稿のつぼみの状態に小道具が入力されていないため、これは常にnullです。 その行を次のように変更します。

const posts = this.state.posts;

また：

if(posts) {
const postList = posts.map((post, index) =>
<div key={index}>post.Title</div>);// Title (if title is part of json)
return (
<div className="col-md-4">
<h4>{title}</h4>
<p>This is generated from Article Component from Article JS { title }</p>
<a className="btn btn-default" href="#">More Info</a>
<div>
{postList}
</div>
</div>
);

}