2

У меня есть объект который по которому я иду циклом и пока контент не загрузится который я хочу отрендерить, должна висеть эта анимация.
Я начинающий, если не трудно, объясните как лучше это реализовать Надеюсь корректно сформировал вопрос.

Пример процесса  загрузки контента

0

2 ответа 2

2

Вам дан ответ в разрезе классового компонента, здесь я опишу возможность использования функциональных компонентов + хуки

export function YourScreen(props) {
  const [isLoading, setValueLoading] = useState(true);
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    // здесь пишется любая логика, которую необходимо выполнить один раз при загрузке
    // запросы к API или слушатели.
    // данный блок выполняется только после рендера, это значит, что сначала выполнится return  в конце функции 
    // и только потом здесь будут происходить операции
    // пример запроса к API
    const getPosts = async () => {
      try {
        const resp = await fetch("https://anyUrl.com", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });
        const json = await resp.json();
        return [resp.status, json];
      } catch (error) {
        console.error(error);
      }
      };
    const status, response = getPosts();
    if (status === 200) {
      setPosts(response.posts)
    }

  },[])

  useEffect(() => {
    setValueLoading(false);
  }, [posts])
  return (
      {isLoading ? <Mask /> : <ListPosts arr={posts}/>}
  );
}

Код выше содержит только основную логику и некоторые пояснения. Далее по пунктам опишу как это работает:

  1. Используется два хука useState(), useEffect(), кликабельно на русскую документацию.
  2. При загрузке данного компонента по дефолту применяется два состояния isLoading = true posts = null
  3. Далее происходит рендер, при условии что isLoading = true и возвращается react компонент, который я назвал Mask и в моем коде это псевдо элемент, который подразумевает вашу картинку в вопросе. Реализация за вами.
  4. После рендера начинает исполняться useEffect() хук с параметром - пустым массивом, см. комментарии в коде
  5. Как только поменяется состояние для переменной posts, сразу исполнится useEffect, где указан параметр [posts]
  6. Изменятся состояние для isLoading = false и происходит ререндер где будет отрисовываться псевдо компонент для ListPosts, тоже не реализован, это за вами

Что доделать:

  1. убрать функцию getPosts() в другое место, отдельный файлик может быть со всеми запросами к API, например
  2. Релизовать функциональные компоненты Mask и ListPosts
1
  • спасибо большое !
    – Oh_legs
    Commented 12 нояб. 2021 в 20:58
2

Примерно так

const PostsData = [
  {
    "category": "News",
    "title": "CNN Acquire BEME",
    "text": "CNN purchased Casey Neistat's Beme app for $25million."
  },
  {
    "category": "Travel",
    "title": "Nomad Lifestyle",
    "text": "Learn our tips and tricks on living a nomadic lifestyle"
  }
]

class App extends React.Component { 
  constructor() {
    super();
    
    this.state = {
      posts: Array.from(Array(10).keys()),
      loading: true
    }
  }
  async componentWillMount() {
    const posts = await this.fetchData();
    
    this.setState({
      posts: posts,
      loading: false
    });
  }
  
  fetchData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(PostsData);
      }, 3000);
    });
  }
 

  render() {
    return <div>
      <header className="app-header"></header>
      <div className="app-card-list" id="app-card-list">
        {
          Object
          .keys(this.state.posts)
          .map(key => { 
            return !this.state.loading ? 
              <Card key={key} index={key} details={this.state.posts[key]}/> :
              <CardPreview />
          })
        }
      </div>
    </div>
  }
}

Вам нужно отображать карточки пока идет загрузка. И, собственно, сам флаг loading, который будет хранить состояние процесса загрузки

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.