Передача данных из вызова AJAX для просмотра в React Native

Question

Я новичок в React, но много знаю о разработке под iOS. Я пытаюсь обернуть голову вокруг технологии; Я заранее прошу прощения за мое невежество. Пожалуйста, постарайтесь быть полезным и не вредным. Таким образом, у меня есть страница входа, которая работает и передает данные на следующий просмотр. Код здесь:

  _getHours = () => {
    this.setState({ isLoading: true });
    fetch('https://seniordevops.com/clockin/list', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
        credentials: 'include'
      })
      .then(response => response.json())
      .then((responseJson) => {
        this.setState({ 
          isLoading: false , 
        });
        this.props.navigator.push({
          title: 'Clock In',
          component: Clockin,
          passProps: {intervals: responseJson}
        });
      })
      .catch(error =>
        this.setState({
          isLoading: false,
          message: 'Something bad happened ' + error
      }));
  } 

Следующее представление работает гладко, и затем я перехожу к той части, где мне нужно обновить FlatList на основе аналогичного вызова API, за исключением того, что с параметром на этот раз код выглядит следующим образом:

  _getHours = (currentProject) => {
    this.setState({currentProject: currentProject });
    fetch('https://seniordevops.com/clockin/list?project=' + currentProject, {
      method: 'GET',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      credentials: 'include',
    })
    .then(response => response.json())
    .then((responseJson) => {
      alert(JSON.stringify(responseJson));
    })
    .catch(error =>
      this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));
  }

Только на этот раз я не знаю, как поступить. Мое предупреждение возвращает JSON, который я хочу, я просто не знаю, что с ним делать. Вот мой FlatList:

<FlatList
  data={this.props.intervals}
  keyExtractor={this._keyExtractor}
  renderItem={this._renderItem}
  ListHeaderComponent={this.renderHeader}
/>

Я знаю, что состояние больше для динамических переменных, но я изначально перешел в подпорку. Может быть, мне нужно установить опору по умолчанию, а затем передать состояние, idk. Как сообщить FlatList, что у меня есть новые данные и выполнить повторную визуализацию? Дополнительный / бонусный вопрос: Должен ли я рассмотреть рефакторинг для сетевого класса в какой-то момент, и если да, использовать Redux? Это для чего? Сконцентрируйтесь на моем главном вопросе, а затем получите бонусные баллы, если вы могли бы дать мне общую сетевую стратегию.

Answer 1

Прочитайте документы, подумайте еще немного, вот мое решение. Добавил эту функцию к тому, что для iOS соответствует ViewController, в React мы говорим класс компонента по умолчанию (я думаю?):

 componentDidMount() {
   this.setState({ hours: this.props.intervals});
 } 

Мне кажется, что эта функция похожа на iOS-версию ViewDidLoad (). Это то место, где вы должны делать вызовы API, но мой уже был сделан из предыдущего ViewController, поэтому я установил реквизиты, которые я передал, в качестве начального значения. Затем изменил мой компонент, чтобы контролировать состояние вместо реквизита.

<FlatList
  data={this.state.hours}
  keyExtractor={this._keyExtractor}
  renderItem={this._renderItem}
  ListHeaderComponent={this.renderHeader}
/>

И, конечно, заменил предупреждение на setState для ответа AJAX.

.then((responseJson) => {
  this.setState({ hours: responseJson});
})