Использование параметра, который будет получать данные из другого API на основе условия реагировать нативно? - PullRequest
Новая
       8

Использование параметра, который будет получать данные из другого API на основе условия реагировать нативно?

0 голосов
/ 13 октября 2019

У меня есть две страницы Portfolio.js и PortfolioDetails.js. В файле Portfolio.js я получаю данные из моего API и отображаю все портфели в списке. Когда я нажимаю на портфель, он должен перейти на экран PortfolioDetails, на котором отображаются только те акции из API-интерфейсов акций, которые находятся в портфеле.

Например, если я нажму на Портфолио с идентификатором 1, он должен отфильтроватьакции от акций API, который имеет портфель с идентификатором 1 и отображать все эти акции на экране.

Пока я успешно получаю как apis, так и когда я щелкаю по одному портфелю, он передает параметр id портфеля на мой экран PortfolioDetails. Я застрял там, где мне нужно отфильтровать акции для отображения на основе этого переданного параметра - id.

Файл Portfolio.js 

export default class Portfolio extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: "Portfolio",
      header: null,
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      PortfolioSource: []
    };
  }

  componentDidMount() {
    fetch("http://127.0.0.1:8000/portfolios/")
      .then(response => response.json())
      .then((responseJson) => {
        this.setState({
          loading: false,
          PortfolioSource: responseJson
        })
      })
      .catch(error => console.log(error)) //to catch the errors if any
  }

  FlatListItemSeparator = () => {
    return (
      <View style={{
        height: .5,
        width: "100%",
        backgroundColor: "rgba(0,0,0,0.5)",
      }}
      />
    );
  }

  renderItem = (data) =>
    <TouchableOpacity style={styles.list} onPress={() => this.props.navigation.push('Details', { portid: data.item.id })} >
      <Text style={styles.lightText}>{data.item.id}</Text>
      <Text style={styles.lightText}>{data.item.portfolio_id}</Text>
      <Text style={styles.lightText}>{data.item.name}</Text>
      <Text style={styles.lightText}>{data.item.description}</Text>
      <Text style={styles.lightText}>{data.item.gains}</Text></TouchableOpacity>

  render() {
    if (this.state.loading) {
      return (
        <View style={styles.loader}>
          <ActivityIndicator size="large" color="#0c9" />
        </View>
      )
    }
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.PortfolioSource}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={item => this.renderItem(item)}
          keyExtractor={item => item.id.toString()}

        />

      </View>
    )
  }

}

PortfolioDetails.js 


export default class PortfolioDetails extends React.Component {

    static navigationOptions = ({ navigation }) => {
        return {
            title: "PortfolioDetails",
            header: null,
        };
    };

    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            PortfolioDetailsdataSource: [],
        };
    }

componentDidMount() {


        fetch(`http://127.0.0.1:8000/stocks/`)
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({
                    loading: false,
                    PortfolioDetailsdataSource: responseJson
                })
            })
            .catch(error => console.log(error)) //to catch the errors if any
    }

    FlatListItemSeparator = () => {
        return (
            <View style={{
                height: .5,
                width: "100%",
                backgroundColor: "rgba(0,0,0,0.5)",
            }}
            />
        );
    }

    goToPrevScreen = () => {
        this.props.navigation.goBack();
    }


    renderItem = (data) =>

        <TouchableOpacity style={styles.list}>
            <Text style={styles.lightText}>{data.item.id}</Text>
            <Text style={styles.lightText}>{data.item.ticker}</Text>
            <Text style={styles.lightText}>{data.item.price}</Text>
            <Text style={styles.lightText}>{data.item.market_cap}</Text>
            <Text style={styles.lightText}>{data.item.YTD}</Text>
            <Text style={styles.lightText}>{data.item.OneYear}</Text>
            <Text style={styles.lightText}>{data.item.TwoYear}</Text>
            <Text style={styles.lightText}>{data.item.TTM_Sales_Growth}</Text>
            <Text style={styles.lightText}>{data.item.PE_Ratio}</Text>
        </TouchableOpacity>


    render() {


        if (this.state.loading) {
            return (
                <View style={styles.loader}>
                    <ActivityIndicator size="large" color="#0c9" />
                </View>
            )
        }
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.PortfolioDetailsdataSource}
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    renderItem={item => this.renderItem(item)}
                    keyExtractor={item => item.id.toString()}
                />


                <Text> portid: {this.props.navigation.state.params.portid} </Text>

                <Button
                    onPress={() => this.goToPrevScreen()}
                    title="go back to Portfolio"
                />
            </View>
        )
    }
}

1 Ответ

0 голосов
/ 14 октября 2019

Вы можете использовать .find (). Например: 

PortfolioDetailsDataSource.find(item => item.id === this.props.navigation.state.params.portId)

Предполагая, что идентификаторы уникальны, это вернет желаемый объект, в противном случае вернется первое вхождение, которое проходит условие.

...