Почему Реактивные Компоненты, хранящиеся как переменные или как состояние, являются плохой практикой проектирования

Question

Мое приложение выполняет вызов API и превращает каждый элемент массива JSON в компонент React.

Я создал массив этих дочерних компонентов, но они не отображаются.Как я могу заставить их сделать?Должен ли я использовать React.create() и затем вызывать render() для каждого?

Каков правильный шаблон дизайна ванильного React для этого?

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) Внутри функции рендеринга мы возвращаем индикатор Loding, если наш индикатор загрузки равен true, или возвращаем массив записей (map возвращает массив), завернутый в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>
    )
  }
}