Question

我的问题在于函数renderImage（），我想返回一些代码，目前它还没有工作。我尝试了不同的东西，但现在我不知道还能做些什么。

这是我的错误：

对象无效作为React子对象（找到：具有键{_45，_81，_65，_54}的对象）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查View的呈现方法。

这是我的代码。重要的功能是renderImage（userid）

感谢。

class Dashboard extends Component{

    constructor(props){
        super(props)
        this.state = {
          dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
          }),
          loaded: false,
           datos: '',
    }

    }

    componentDidMount(){
        this.fetchData();
    }

        fetchData(){
            fetch(REQUEST_URL)
            .then((response) => response.json())
            .then ((responseData) =>{   
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData),
                    loaded: true
                })

            })
        }

        renderLoadingView(){
            return(
                <View>
                <Text>Cargando...</Text>
                </View>
                )
        }
        renderImage(userid){
        const REQUEST_URL = "xxxxxxx" + userid;

        return fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{  
            return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />)  
        })        
        }


        renderReceta(receta){
        return(
                        <Card >
                            <CardItem>
                                <Left>
                                    <TouchableOpacity>
                                     {this.renderImage(receta.user_id)}
                                      </TouchableOpacity>
                                    <Body>
                                        <Text>{receta.Titulo}</Text>
                                        <Text>{receta.Username}</Text>
                                    </Body>
                                </Left>
                              </CardItem>
                       </Card>             
            )   
        }

        render(){
            if(!this.state.loaded){
                return this.renderLoadingView();
            }
            else{
                return(
                <Container>
                    <Header><Title>Eat</Title></Header>
                    <ListView 
                    dataSource={this.state.dataSource}
                    renderRow={this.renderReceta.bind(this)}
                    />
                </Container>
                )
            }

        }
    }

Answer 1

你的问题在这里：

 return(
                        <Card >
                            <CardItem>
                                <Left>
                                    <TouchableOpacity>
                                     {this.renderImage(receta.user_id)}
                                      </TouchableOpacity>
                                    <Body>
                                        <Text>{receta.Titulo}</Text>
                                        <Text>{receta.Username}</Text>
                                    </Body>
                                </Left>
                              </CardItem>
                       </Card>             
            )   
        }

您正在使用两个获取请求来实际完成请求，但您将立即返回this.renderImage的结果。该方法返回的是当您返回时实际上没有完成的提取：

renderImage(userid){
        const REQUEST_URL = "xxxxxxx" + userid;

        return fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{  
            return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />)  
        })        
        }

您返回获取响应，但该操作在后台运行。尝试这样的事情（并删除更新加载状态的另一行）：

this.setState({loaded: true}, () => {
return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />) 
});

有很多解决方案。您也可以使用带有源的图像让RN处理加载，或者使用两个不同的状态值，一个用于第一次加载，然后是图像。问题是你链接了两个获取请求。

Answer 2

fetch(REQUEST_URL)应与return位于同一行，.done()不是Promise对象的方法

return fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{  
            return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} /> )     
        })

在fetch React-Native中返回代码

2 个答案: