React-Native/Expo 收到错误 'null 不是对象（正在评估 'match.localteam_name'）

Question

这里我只有运行两个API请求。 componentDidMount 函数中的第一个工作正常，但第二个标有 handleMatchFacts 的功能不起作用。简而言之，我使用 React-Native 从 API 检索信息，将其安装到页面，然后一旦单击 Touchablehighlight，它就会根据 API 从 API 检索附加信息=15=] 传入 '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 请求不是 return 数组，它 return 是一个对象。 cloneWithRows 需要一个数组。替换此行

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

与

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

可能会有所帮助，具体取决于您如何呈现此新数据。

这只是一个猜测，因为我不知道您遇到了什么错误。

React-Native/Expo 收到错误 'null 不是对象（正在评估 'match.localteam_name'）

React-Native/Expo Receiving ERROR 'null is not an object (evaluating 'match.localteam_name')

ios

json

react-native

fetch

expo