使用基于条件反应会从另一个api获取数据的参数吗？

Question

我有两个页面Portfolio.js和PortfolioDetails.js。在Portfolio.js文件中，我正在从api中获取数据并在列表中显示所有投资组合。当我单击投资组合时，它将带我进入PortfolioDetails屏幕，该屏幕将仅显示来自投资组合中的来自api的股票。

例如，如果我单击ID为1的投资组合，则应该从投资组合ID为1的股票api中过滤掉股票，并在屏幕上显示所有这些股票。

到目前为止，我成功获取了两个api，并且当我单击一个投资组合时，它都将投资组合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>
        )
    }
}

Answer 1

您可以使用.find（）。例如：

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

假设ID是唯一的，这将返回所需的对象，否则将返回通过条件的第一个匹配项。