我的问题是在函数renderImage（），我想返回一些代码，但目前它不起作用。我尝试了不同的事情，但现在我不知道我还能做什么。
这是我遇到的错误：
对象作为 React 子对象无效（找到：键为 {_45， _81， _65， _54} 的对象）。如果你打算渲染一个子项的集合，请使用数组代替，或者使用 React 插件中的 createFragment（object） 包装对象。检查 View 的渲染方法。
这是我的代码。重要的函数是渲染图像（用户ID）
谢谢。
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>
)
}
}
}
你的问题在这里：
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}} />)
})
}
您返回 fetch 响应，但它在后台运行。尝试这样的事情（并删除更新加载状态的另一行）：
this.setState({loaded: true}, () => {
return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />)
});
对此有很多解决方案。您也可以只使用带有源的图像，让 RN 处理加载，或者有两个不同的状态值，一个用于第一次加载，然后用于图像。问题是您正在链接两个获取请求。
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}} /> )
})