Экран не обновляется в React Native автоматически - PullRequest
Новая
       5

Экран не обновляется в React Native автоматически

0 голосов
/ 22 января 2019 
async componentDidMount () {         
        this._isMounted = true;
        await this.showPosts();
  }

  componentDidUpdate () {
        this.showPosts();   
  }

  showPosts = async () => {    
    try {    
    var userID = await AsyncStorage.getItem('userID');

    fetch(strings.baseUri+"getPostWithUserID", {
        method: 'POST',
        headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            "user_id": userID
        })
        })
        .then((response) => response.json())
        .then((responseJson) => {

        let jsonObj = JSON.parse(JSON.stringify(responseJson));

        if (jsonObj.status=="true") {

            this.setState({ 
                data: responseJson.data, 
                imageSrc: responseJson.data.imgSrc, 
            });

        } 
        else {
            if (this._isMounted) {
                this.setState({show: false});
            }
        }  

        })
        .catch((error) => {
            console.error(error);
        });
    }
    catch (err) {
        console.warn(err);
      }

  }

  componentWillUnmount () {
    this._isMounted = false;
  }

showPosts - это моя функция, которая извлекает данные и отображает их в плоский список. 

 <FlatList 
            data={this.state.data}
            keyExtractor={(index) => index.toString()}
            renderItem={ ({item,index}) => this._renderItem(item,index) }
            extraData={[ this.state.checked, this.state.data ]}
 />
  1. Теперь, когда я загружаю одно сообщение и возвращаюсь к моему домашнему экрану, который вызывает showPosts, и проверяю его в моем эмуляторе, перезагружая приложение снова, оно показывает мне сообщение.
  2. И теперь, когда я загружаю другое сообщение и возвращаюсь на свой домашний экран, мне не нужно перезагружать мое приложение в эмуляторе, но мой componentDidUpdate вызывается и автоматически обновляет экран и показывает мне новое сообщение.

Мой вопрос заключается в том, почему я должен перезагружать (перезагружать его, нажимая несколько раз клавишу R) мое приложение снова, когда на домашнем экране нет записей. Я хочу, чтобы мой экран обновлялся автоматически при загрузке первого сообщения. Экран обновляется автоматически только там, где есть более 1 сообщения.

P.S. - Я также попробовал onRefresh(), не помог в моей проблеме.

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Используйте forceUpdate()

, пожалуйста, проверьте эту ссылку: https://reactjs.org/docs/react-component.html#forceupdate

0 голосов
/ 22 января 2019

Я думаю, что вы используете неправильный метод. Компонент сделал обновление будет вызван после обновления. Вместо этого вы должны использовать shouldComponentUpdate и возвращать true / false.

Вы можете пропустить опору при переходе на домашний экран следующим образом: 

this.props.navigation.navigate("PathName", {option: "update"})

Затем на главном экране поймайте его в поле mustComponentUpdate 

 shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.navigation.state.params.option === "update") {
        this.showPosts()
        return true
    }
    return false
}

Или, может быть, вы должны сохранить свой список сообщений в диспетчере состояний, например, в redux, и сделать его источником данных для своего списка. Затем обновите список на другом экране, список будет автоматически обновляться на HomeScreen

...