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

Posted 2023-02-19

【中文标题】React-Native/Expo 接收错误\'null 不是对象（评估\'match.localteam_name\'）

【英文标题】：React-Native/Expo Receiving ERROR 'null is not an object (evaluating 'match.localteam_name')React-Native/Expo 接收错误'null 不是对象（评估'match.localteam_name'）

【发布时间】：2017-09-26 07:49:06

【问题描述】：

这里我只运行两个 API 请求。 componentDidMount 函数中的第一个工作正常，但标记为 handleMatchFacts 的第二个不起作用。简而言之，使用 React-Native 我正在从 API 检索信息，将其安装到页面上，然后一旦单击 Touchablehighlight，假设根据在“onPress”中传递的“id”从 API 检索附加信息'。我可以 console.log 在第二个请求中记录数据的 json，但由于某种原因，当我使用新数据 setState 并将其呈现到 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',
  ,
);

【参考方案1】：

您可能会看到一个问题，因为第二个 API 请求没有返回数组，而是返回了一个对象。 cloneWithRows 需要一个数组。替换此行

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

与

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

可能会有所帮助，具体取决于您呈现这些新数据的方式。

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