Question

我的代码（React Native）中的方法有问题。

我有一个ID数组，我想在每个ID中提出一个“ GET”请求以显示每个ID的预览卡。

这就是为什么我在数组上使用'map'方法的原因。该请求工作正常，然后我调用我的方法cardUser(user)进行显示。

这就是我做地图的代码的一部分（可以正常工作）：

render() {
    if (!this.state.isLoaded) {
        return (
            <Spinner color='#84568c' />
        );
    } else {
        var user = this.state.user;
        return (
            <ScrollView
                refreshControl={
                    <RefreshControl
                        tintColor='#84568c'
                        refreshing={this.state.refreshing}
                        onRefresh={this._onRefresh.bind(this)} />
                }
            >
                <Content padder>
                     {user.following.map(following => (
                        this.getUserByID(following)
                     ))}
                </Content>
            </ScrollView>
        );
    }
}

我打电话给getUserByID()（很好）：

getUserByID(id) {
    fetch(api.base_url + api.user_url + '/' + id, {
        method: "GET",
        headers: { 'Authorization': 'Bearer ' + this.state.token }
    })
    .then((response) => response.json())
    .then((responseData) => {
        this.cardUser(responseData);
    })
    .done();
}

现在我在responseData中有一个要回答的问题，我想显示每个user并进行布局。因此，我每次都用一个cardUser()对象调用user。

cardUser(user) {
    console.log(user.id);
    return (
        <TouchableHighlight underlayColor='transparent' key={user.id}
            onPress={() => this.props.navigation.navigate('UserProfile', {id: user.id})} onLongPress={() => this.alertUserId(user.id)} >
            <View style={container.card}>
                    <View style={container.cardUser}>
                        <Image source={{uri: user.banner}} style={{position: 'absolute', width: '100%', height: 170, borderRadius: 20}} />
                        <View style={container.darkLayer}>
                            <Left>
                                <Thumbnail large source={{uri: user.photo}} style={{alignSelf: 'center'}}/>
                            </Left>
                            <Body>
                                <View style={{alignItems: 'center'}}>
                                    <Text style={text.pseudoHomepage}>{user.username}</Text>
                                    <Text style={[text.stats, {color: 'white'}]}>{user.first_name}</Text>
                                </View>
                            </Body>
                            <Right>
                                <Icon ios='ios-medal' android='md-medal' style={{color: 'white', alignSelf: 'center', fontSize: 40}}/>
                            </Right>
                        </View>
                        <View style={container.darkFooterLayer}>
                            <Text numberOfLines={2} style={text.bioFotter}>{user.bio}</Text>
                        </View>
                    </View>
            </View>
        </TouchableHighlight>
    );
}

但这并没有显示任何内容...但是，如果我进行console.log(user)，它将在日志中显示正确的内容！以正确的顺序，没有重复的对象或其他任何东西……

此外，如果我将console.log(user)放在return()中，它也显示正确的内容，并且没有任何错误或警告消息。

如果您需要其他信息，请告诉我，我希望我足够清楚。祝你有美好的一天！

（抱歉，如果我拼写错误，英语不是我的语言）

Answer 1

首先，您需要获取所有数据。您不能在render方法中做到这一点。

componentDidMount() {
  Promise.all(this.state.user.following.map(this.fetchUser))
    .then(userFetchedArray => this.setState({ usersList: userFetchedArray }))
}

fetchUser(id) {
  return fetch(api.base_url + api.user_url + '/' + id, {
    method: "GET",
    headers: { 'Authorization': 'Bearer ' + this.state.token }
  })
  .then((response) => response.json());
}

然后您需要呈现获取的数据：

render() {
...
<Content padder>
  {this.state.usersList.map(this.cardUser)}
</Content>
...

传递给map的回调应该返回jsx，但在您的情况下，它将返回undefined（getUserByID函数什么也不返回）。而且此回调不能是异步的

方法的返回不显示[React Native]

1 个答案: