0

这里我只运行两个 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',
  },
});
4

1 回答 1

0

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

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

和

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

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

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

于 2017-04-28T13:56:35.313 回答