Question

我不知道标题是否是最好的标题，但问题是我在React Native中有一个父组件。在这个父组件内部，我获取了一些位置数据（countryName，countryCode等）。这些数据是孩子们自己获取更多数据以获取基于countryName的特定信息所必需的。我只是在孩子身上做一个HTTP GET fetch（）。

现在，每当孩子的componentDidMount方法运行时，我仍然没有this.props.countryName可用，因此，我在子组件中的提取无法检索数据。

我想以某种方式，每当ParentComponent完成提取位置数据时，通知ChildrenComponent，以便他可以{country} getAllReports()。

这是我目前的代码：

var ParentComponent = React.createClass({

    getInitialState: function() {
        return {
            countryName: '',
            regionName: '',
            countryCode: ''
        }
    },

    componentDidMount: function() {
        this.getLocationData();
    },

    render: function() {
        return (
            <ChildComponent countryName={ this.state.countryName }></ChildComponent>
        )
     },

     getLocationData() {
        fetch(Constants.GEO_URL)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                countryName: responseJson.country_name,
                regionName: responseJson.region_name,
                countryCode: responseJson.country_code
            });
        })
        .catch((error) => {
            console.log('Failed to get location data');
        });
    }
})

这将是ChildComponent

var ChildComponent = React.createClass({

    getInitialState: function() {
        return {
            reports: []
        }
    },

    componentDidMount: function() {
        this.getAllReports().catch((error) => { console.log("ERROR on getAllReports() - ") });
    },

    render: function() {
        return (
            <ScrollView refreshControl={
                  <RefreshControl
                        refreshing={ this.state.refreshing }
                        onRefresh={ this._onRefresh }
                        title={ i18n.t('loading') }
                      />
                  }>
                { this.listReports() }
            </ScrollView>
        )
     },

    listReports: function() {
        if (this.state.reports.length > 0) {
            return this.state.reports.map(function(report, key) {
                return <ReportItem key={ key } item={ report } />
            });
        }else{
            return <Text style={ styles.statusMessage }>{ i18n.t('noMissingError') }</Text>
        }
    },

    getAllReports: function() {
        return new Promise((resolve, reject) => {
            var url = Constants.API_LOCAL_URL + '/reports' + '?country=' + this.props.countryName;
            console.log('URL > ' + url);
            fetch(url)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson)
                this.setState({
                    reports: responseJson
                });
                resolve();
            })
            .catch((error) => {
                alert('Error retrieving reports.');
                reject();
            })
        });
    }
})

正如您所看到的，每当呈现ChildComponent时，它都没有任何countryCode，因此无法检索。另外，我添加了RefreshControl，所以它实际上在我上拉ScrollView时检索数据，重新加载所有数据并获取所有数据......但仅仅因为我之后获得了countryName。

我一直在寻找一些方法，例如从组件触发事件，并在其他人中有一个监听器。好像没有办法做到这一点。

有关如何解决此问题的任何建议？

Answer 1

我认为更好的解决方案可能是获取您需要的所有数据，然后将其传递给子组件。这样，获取将被隔离到父级，您可以在之前保证它。

承诺的美丽是你可以坚持下去：

  fetch(url)
  .then(function(response) {
    if (response.status >= 400) {
      throw new Error("Bad response from server");
    }
    return response.json();
  })
  .then(function(data) {
    // fetch here again if needed can also set state here or in next .then
    that.setState({ person: data.person });
  });

通知子组件Promise已经结束，那么子组件可以执行一个方法（本机反应）

1 个答案: