为什么React组件被存储为变量或状态是糟糕的设计实践

Question

我的应用程序进行API调用，并将JSON数组的每个元素转换为React组件。

我创建了这些子组件的数组，但它们不呈现。如何强制它们渲染？我应该使用React.create()然后在每个上面调用render()吗？

什么是适当的香草反应设计模式？

var apiPosts = [];

class PostsItsContainer extends Component {
 constructor(props){
 super(props);
 this.state = {}
 }

componentDidMount(){
   let uri = "some_API_endpoint" ; 

   if(uri){ 
    fetch(uri)
   .then(data => data.json())
   .then(posts => {
     posts.data.children.forEach(post => {
       let imgUrl = post.data.hasOwnProperty('preview') ? post.data.preview.images[0].source.url : null;
       let postData = [post.data.title, imgUrl, post.data.link];
       apiPosts.push(<PostIt link={post.data.url} image={imgUrl} title={post.data.title} />);
     });
   }).catch(err => console.log(err)) }

 }

 render() {
   return (
     <div className="PostsItsContainer">
      {apiPosts}
     </div>
   );
 }
}

编辑：

我改变了我的头衔，因为它非常通用。而且我真的在问为什么我的方法是糟糕的设计实践并且不会给我正确的结果。

@ Jayce444告诉我为什么和@ Supra28给出了一个很好的答案。我在这里发布了@ Jayce444的评论，因为它易于阅读：

将组件存储在变量或数组中然后使用它是完全可能的。但是商店/道具应该保留用于渲染东西所需的裸骨数据，而不是整个预制组件。有几个原因，其中两个是：首先你会膨胀国家/道具这样做，其次你将逻辑和视图功能结合起来。渲染组件所需的数据及其呈现的实际方式应松散耦合，使您的组件更易于维护，修改和理解。这就像将HTML和CSS分成单独的文件一样，它更容易:)

Answer 1

所以我们在这里做的是：

1）最初将加载状态设置为true

2）当我们从api获取数据时，我们希望我们的组件重新呈现以显示新数据，因此我们将数据保持在状态。

3）在render函数内部，我们返回一个加载指示器，我们的加载指示器为true或返回包含div的帖子数组（map返回一个数组）。

class PostsItsContainer extends Component {
  constructor(props) {
    super(props)
    this.state = { apiData: [], loadingPosts: true } // Loading state to know that we are loading the data from the api and do not have it yet so we can display a loading indicator and don't break our code
  }

  componentDidMount() {
    let uri = "some_API_endpoint"
    if (uri) {
      fetch(uri)
        .then(data => data.json())
        .then(posts => {
          this.setState({ apiData: posts.data.children, loadingPosts: false }) //Now we save all the data we get to the state and set loading to false; This will also cause the render function to fire again so we can display the new data
        })
        .catch(err => console.log(err))
    }
  }

  render() {
    if (this.state.loadingPosts) return <div>Loading......</div> //If we haven't recieved the data yet we display loading indicator
    return (
      <div className="PostsItsContainer">
        {this.state.postData.map((post, i) => (
          <PostIt
            key={i} //You'll need a key prop to tell react this is a unique component use post.id if you have one
            link={post.data.url}
            image={
              post.data.preview ? post.data.preview.images[0].source.url : null
            }
            title={post.data.title}
          />
        ))}
      </div>
    )
  }
}