Question

这里我只运行两个API请求。 componentDidMount函数中的第一个工作正常，但第二个标记为handleMatchFacts的工作不起作用。简而言之，使用React-Native我正在从API中检索信息，将其挂载到页面，然后一旦点击Touchablehighlight，就可以根据'onPress中传递的'id'从API中检索其他信息。 ”。我能够在第二个请求中调试数据的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',
  },
});

Answer 1

您可能看到了一个问题，因为第二个API请求不返回数组，它返回一个对象。 private_key需要一个数组。替换此行

cloneWithRows

与

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

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

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

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

1 个答案: