为什么将React组件存储为变量或状态是错误的设计实践

Question

My application makes an API call and turns each element of a JSON array into a React Component.

I made an array of these child components, but they do not render. How do I force them to render? Should I use the React.create() and then call render() on each?

What is the proper vanilla React design pattern for this?

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

EDIT:

I changed my title cause it was pretty generic. And really I was asking why my method was bad design practice and wouldn't give me proper results.

@Jayce444 told me why and @Supra28 gave a good answer. I'm posting @Jayce444's comment here for it to be easily read:

It's perfectly possible to store a component in a variable or array and then use that. But the store/props should be reserved for the bare bones data needed to render stuff, not the entire pre-made component. There's s few reasons, two being: firstly you'll bloat the state/props doing that, and secondly you're combining the logic and view functionalities. The data needed to render a component and the actual way it's rendered should be loosely coupled, makes your components easier to maintain, modify and understand. It's like separating HTML and CSS into separate files, it's easier :)

Answer 1

So what we do here is :

1) Set the loading state to true initially

2) When we get the data from the api we want our component to rerender to display the new data, so we keep the data in the state.

3) Inside of the render function we return a Loding indicator if our loading indicator is true or return the array of posts (map returns an array) wrapped with a div.

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