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

问题描述

我的代码（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()它也会显示正确的内容，并且我没有任何错误或警告消息。

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

（对不起，如果我拼错了，英语不是我的语言）

标签： javascriptreact-native

首先，您需要获取所有数据。你不能在 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 函数什么都不返回）。此回调也不能是异步的

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

问题描述

解决方案

推荐阅读