Как сделать частичный рендер приложения в React - PullRequest
Новая
       43

Как сделать частичный рендер приложения в React

0 голосов
/ 03 июля 2019

У меня заключительная борьба с моим погодным приложением, которое работает следующим образом -> пользователь выбирает страну из списка -> пользователь вводит название города, отфильтрованного функцией, которая показывает только города, принадлежащие стране.

Поскольку приложение полагается на импорт файла JJ больших городов, содержащего список городов на выбор, я реализовал загрузочную анимацию в Header.js, которая заменяется на ввод данных страны и города, отображаемых в Body.js после импорта файла cityJSON вfull.

Предполагается, что поток работает следующим образом:

1) Body.js загружает файл townsJSON -> ComponentDidMount запускает функцию, которая:

a) переключает отображение:none 'into "display: block" с городами и странами на выбор

b) отправляет параметр обратного вызова (true) обратно родителю. Затем родительский файл App.js отправляет это (true) значение какреквизит для Header.js

c) Header.js получает реквизит и отключает анимацию (! true &&

Единственная проблема - это сделатьвообще не работает; /

Приложение просто загружает все сразу.Возможно ли, что из-за того, что App.js рендерит и Header, и Body, он просто рендерит все сразу?Как мне обойти это?

Вот коды и коробки с этим приложением =>

https://codesandbox.io/s/stoic-napier-6uf2n?fontsize=14&fbclid=IwAR1G74R4Aak621dbbFT9h8wLrdW6WKTpwDoEkV8eLW3VRLGLLLih1Z24s8k

Это должно было быть простым приложением, но я либо амбициозенили я тут что-то не так делаю ...

https://codesandbox.io/s/stoic-napier-6uf2n?fontsize=14&fbclid=IwAR1G74R4Aak621dbbFT9h8wLrdW6WKTpwDoEkV8eLW3VRLGLLLih1Z24s8k

1 Ответ

0 голосов
/ 05 июля 2019

Хорошо, поэтому я в основном получил большой JSON-файл на ComponentDiDMount, и после этого я заново отображаю представление внутри ComponendDidUpdate

componentDidMount () {

    this.fetchCityList();
}


fetchCityList = () => {
    //
    // fetch('https://codewave.com.pl/weatherly_app/json/current.city.list.min.json')
    //
console.log('fetchCityList running')

    fetch('https://codewave.com.pl/weatherly_app/json/current.city.list.min.json')
        .then( res => res.json())
        .then( response =>
            this.setState ({ fetchedCityList: response}))

};

componentDidUpdate(prevProps, prevState, snapshot) {
    if(prevState.dataReady === false) {
        this.setState ({ dataReady: true
    });
        this.props.handleDataFetch(true)
    }}
...