Question

[

图像是console.log（this.state.fixtures）

时的结果

我没有遇到错误，但也没有得到结果。只是尝试将单个匹配从.map（）传递到Card组件。不确定是否应该在TouchableOpacity中调用onPress。一直在看这几天，任何反馈都赞赏。谢谢。

＆＃13;

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, LayoutAnimation } from 'react-native';
import { Card, CardSection } from '../common';
//import ListOf from './ListOf';

export default class LeagueCard extends Component {

	state ={
		fixtures: null
	}

	componentDidMount = () => {
		const {league_name, league_id } = this.props.league	
		{this.getMatches(league_id)}
	}



	getMatches = (league_id) => {
		let legaueID = league_id
		let fixArray = []
		//console.log(legaueID)
		fetch(`https://apifootball.com/api/?action=get_events&from=2016-10-30&to=2016-11-01&league_id=${legaueID}&APIkey=42f53c25607596901bc6726d6d83c3ebf7376068ff89181d25a1bba477149480`)
			.then(res => res.json())
				.then(fixtures => {
					 	 
					fixtures.map(function(fix, id){
					 	 	
						fixArray =[...fixArray, fix]

					})
					 	this.setState({
					 		fixtures: fixArray
					 	})
                        console.log(this.state.fixtures)
				}) 
	}


	display = () => {
		//console.log(this.state.fixtures)
		
		if(this.state.fixtures != null){
			  this.state.fixtures.map(function(match, id){
							//console.log(match)
							return (
								<Text>match</Text>
								)
			})
		}
	}

render(){
	const {league_name, league_id } = this.props.league

	return(
		<View>
		<TouchableOpacity
			onPress={() => this.display()}
		>
			<Card>
				<CardSection>
					<Text>{league_name}</Text>
				</CardSection>
		
				
			</Card>
		</TouchableOpacity>
		</View>
	)}


}

＆＃13;

在这里输入代码

Answer 1

import React, {Component} from 'react';
import {View, Text, TouchableOpacity, LayoutAnimation} from 'react-native';
import {Card, CardSection} from '../common';

export default class LeagueCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fixtures: null,
      matches: []
    }
  }

  componentDidMount() {
    const {league_name, league_id} = this.props.league;
    this.getMatches(league_id)
  };

  getMatches = (league_id) => {
    let legaueID = league_id;
    let fixArray = [];
    fetch(`https://apifootball.com/api/?action=get_events&from=2016-10-30&to=2016-11-01&league_id=${legaueID}&APIkey=42f53c25607596901bc6726d6d83c3ebf7376068ff89181d25a1bba477149480`)
      .then(res => res.json())
      .then(fixtures => {
        fixtures.map(function (fix, id) {
          fixArray = [...fixArray, fix]
        });
        this.setState({
          fixtures: fixArray
        })
      })
  };

  display = () => {
    if (this.state.fixtures != null) {
      this.setState({
        matches: this.state.fixtures.map(match => <Text>{match.country_name}</Text>)
      });
    }
  };

  render() {
    const {league_name, league_id} = this.props.league;
    return (
      <View>
        <TouchableOpacity onPress={this.display}>
          <Card>
            <CardSection>
              {this.state.matches}
            </CardSection>
          </Card>
        </TouchableOpacity>
      </View>
    )
  }
}

我做了改动，我认为会为你渲染你的比赛。我让你的display() f设置了你的LeagueCard的state.matches，现在它将是一个显示匹配的Text组件数组。 JavaScript中的Array.prototype.map函数返回一个 new 数组，然后应该使用该数组。

还应该提一下，我在初始化状态时添加了一个构造函数，虽然这不是绝对必要的，但这是一个很好的做法。

也要注意拼写错误，getMatches中有一个我没有修复。

编辑：我将匹配更改为match.country_name，因为您无法直接将对象提供给Text组件。您需要获取要显示的对象的每个键/值对。

Answer 2

这不会向您显示任何错误，但您的组件将无法呈现，因为react不知道在何处呈现它，此问题的解决方法是尝试这样的事情

import React, { Component } from 'react';
    import { View, Text, TouchableOpacity, LayoutAnimation } from 'react-native';
    import { Card, CardSection } from '../common';
    //import ListOf from './ListOf';

    export default class LeagueCard extends Component {

        state ={
            fixtures: null,
            showTextList: false
        }

        componentDidMount = () => {
            const {league_name, league_id } = this.props.league 
            {this.getMatches(league_id)}
        }



        getMatches = (league_id) => {
            let legaueID = league_id
            let fixArray = []
            //console.log(legaueID)
            fetch(`https://apifootball.com/api/?action=get_events&from=2016-10-30&to=2016-11-01&league_id=${legaueID}&APIkey=42f53c25607596901bc6726d6d83c3ebf7376068ff89181d25a1bba477149480`)
                .then(res => res.json())
                    .then(fixtures => {

                        fixtures.map(function(fix, id){

                            fixArray =[...fixArray, fix]

                        })
                            this.setState({
                                fixtures: fixArray
                            })
                    }) 
        }


        display = () => {
            //console.log(this.state.fixtures)

            this.setState({showTextList: true})
        }

    render(){
        const {league_name, league_id } = this.props.league

        return(
            <View>
            <TouchableOpacity
                onPress={() => this.display()}
            >
                <Card>
                    <CardSection>
                        <Text>{league_name}</Text>
                       {this.state.showTextList && this.state.fixtures && 
                           this.state.fixtures.map((match, id) => (<Text>{match}</Text>))

            }
                    </CardSection>


                </Card>
            </TouchableOpacity>
            </View>
        )}


    }

我只是将文本列表放在CardSection中，因为我相信你想要在其中呈现列表，但随意把它放在你想要的地方

在TochableOpacity中调用的onPress可以返回Text组件吗？

2 个答案: