React-Native/Expo Receiving ERROR 'null не является объектом (оценка'match.localteam_name')

Question

Здесь я выполняю только два запроса API. Первый в функции componentDidMount работает нормально, но второй с меткой handleMatchFacts не работает. Короче говоря, используя React-Native, я извлекаю информацию из API, монтирую ее на странице, а затем, после нажатия Touchablehighlight, можно получить дополнительную информацию из API в соответствии с "id", который передается в "onPress". ". Я могу console.log json данных во втором запросе, но по какой-то причине, когда я устанавливаю состояние с новыми данными и отображаю их на странице в ListView, я получаю сообщение об ошибке.

import React from 'react'

import { View, Text, StyleSheet, ListView, TouchableHighlight } from 'react-native'


export default class Main extends React.Component {
  constructor() {
  super();
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    matches: ds.cloneWithRows([]),
    matchFacts: ds.cloneWithRows([])
  };
  this.handleShowMatchFacts.bind(this)
}

  componentDidMount(){

    fetch("http://api.football-api.com/2.0/matches?match_date=27.04.2017&to_date=27.04.2017&Authorization=565ec012251f932ea4000001fa542ae9d994470e73fdb314a8a56d76")
    .then(res => res.json())
    .then(matches => {
      this.setState({
        matches : this.state.matches.cloneWithRows(matches)
      })
    })
  }

  handleShowMatchFacts = id => {
    console.log('match', id)
    return fetch(`http://api.football-api.com/2.0/matches/${id}?Authorization=565ec012251f932ea4000001fa542ae9d994470e73fdb314a8a56d76`)
    .then(res => res.json())
    .then(matchFacts => {
      console.log('match facts', matchFacts)
      let selectedMatch = matchFacts;
         this.setState({
        matches : this.state.matches.cloneWithRows([]),
        matchFacts : this.state.matchFacts.cloneWithRows(selectedMatch)
      })
    })
  }

  render() {
    return (
    <View style={styles.mainContainer}>
      <Text 
      style={styles.header}>
      Todays Matches</Text>
      <ListView
          style={styles.matches}
          dataSource={this.state.matches}
          renderRow={(matches) => 
          <TouchableHighlight 
          onPress={() => this.handleShowMatchFacts(matches.id)}
          underlayColor="green"
          ><Text style={styles.item}> {matches.localteam_name} {matches.localteam_score} - {matches.visitorteam_score} {matches.visitorteam_name} </Text>
         </TouchableHighlight>
          }
        />
      <ListView
          style={styles.matches}
          dataSource={this.state.matchFacts}
          renderRow={(match) => 
          <Text style={styles.item}> {match.localteam_name} {match.localteam_score} - {match.visitorteam_score} {match.visitorteam_name} </Text>
          }

        />   

    </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer : {
    flex: 1,
    padding: 20
  },
  header : {
    textAlign: 'center'
  },
  matches : {
    marginTop: 20
  },
  item : {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: 'green',
    marginBottom: 5,
    padding: 20,
    textAlign: 'center',
  },
});

Answer 1

Вы, вероятно, видите проблему, потому что второй запрос API не возвращает массив, он возвращает объект. cloneWithRows ожидает массив. Замена этой строки

matchFacts : this.state.matchFacts.cloneWithRows(selectedMatch)

с

matchFacts : this.state.matchFacts.cloneWithRows([selectedMatch])

может помочь, в зависимости от того, как вы отображаете эти новые данные.

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