setState () в функции рендеринга вернуть? - PullRequest
Новая
       44

setState () в функции рендеринга вернуть?

0 голосов
/ 14 ноября 2018 
this.state = {
      fontLoading: false,
      dataFetched: false,
    };

У меня есть два состояния, загрузка шрифтов которых изменяется внутри async componentDidMount () и dataFetched меняется внутри другой функции.«fontLoading» меняется в приведенной ниже функции.

async componentDidMount () {
    try {
      await Font.loadAsync ({
       ...
      });
      this.setState ({fontLoading: true});
    } catch (error) {
      ...
    }
}

Сначала, если и еще, если отлично работают с fontLoading и dataFetched.В последнем случае экран состояния отображается на секунду, после чего я получил ошибку, потому что я пытаюсь изменить состояние dataFatched при нажатии кнопки.Функция рендеринга снова визуализирует вид внутри условия «else if» через секунду.Но я хочу сделать еще условие, и когда я нажимаю кнопку, я должен получить еще, если вернуться.

render(){
    if (!this.state.fontLoading) {
      return (<ActivityIndicator />);
    }
    else if (!this.state.dataFetched) {
      return (new<View>)
    }
    else {
      return (
      <View>
        <Button title = 'Click' onPress={this.setState({dataFetched: false});}></Button>
      </View>
     );
    }

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

1 Ответ

0 голосов
/ 14 ноября 2018

Способ написания атрибута onPress в конечном итоге вызовет this.setState({dataFetched: false}) сразу после рендеринга компонента.onPress должна быть предоставлена ​​функция в качестве аргумента, и эта функция должна вызывать setState. 

onPress={this.setState({dataFetched: false});} // <- Replace this

onPress={() => this.setState({dataFetched: false})} // <- with this
...