ios - 这个在 TochableOpacity 中调用的 onPress 可以返回一个 Text 组件吗？

Question

[

图片是你console.log(this.state.fixtures)时的结果

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

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>
	)}


}

在此输入验证码

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，它现在将是一个文本组件数组，每个组件都显示匹配项。 JavaScript 中的 Array.prototype.map 函数返回一个新数组，然后应该使用它。

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

还要注意错别字，getMatches 中有错别字，我没有改正。

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