在获取React-Native中返回代码
[英]Returning code in fetch React-Native
问题描述
My problem is in the function renderImage(), that I want to return some code and for the moment it's not working. 
我的问题是在函数renderImage（）中，我想返回一些代码，但目前无法正常工作。 I tried different things but now I don't know what else I can do. 我尝试了不同的方法，但现在我不知道还能做什么。
This is the error that I have: 这是我的错误：
Objects are not valid as a React child (found: object with keys {_45, _81, _65, _54}). 对象作为React子对象无效（找到：带有键{_45，_81，_65，_54}的对象）。 If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. 如果您打算渲染孩子的集合，请改用数组或使用React附加组件中的createFragment（object）包装对象。 Check the render method of View . 检查View的渲染方法。
This is my code. 这是我的代码。 The important function is renderImage(userid) 重要的功能是renderImage（userid）
Thanks. 谢谢。
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>
)
}
}
}
2 个解决方案
解决方案1
1 2017-10-23 03:38:20
Your problem is here: 您的问题在这里：
return(
<Card >
<CardItem>
<Left>
<TouchableOpacity>
{this.renderImage(receta.user_id)}
</TouchableOpacity>
<Body>
<Text>{receta.Titulo}</Text>
<Text>{receta.Username}</Text>
</Body>
</Left>
</CardItem>
</Card>
)
}
You are using two fetch requests to actually complete the request but you are immediately returning the result of this.renderImage. 您正在使用两个获取请求来实际完成请求，但是您将立即返回this.renderImage的结果。 That method is returning a fetch that is not actually done by the time you return it: 该方法返回的获取实际上在您返回时尚未完成：
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}} />)
})
}
You return the fetch response but that is running in the background. 您返回获取响应，但该响应在后台运行。 Try something like this (and remove the other line that updates the loaded state): 尝试这样的操作（并删除另一条更新已加载状态的行）：
this.setState({loaded: true}, () => {
return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />)
});
There are many solutions for this. 有很多解决方案。 You could also just use an Image with a source a let RN handle the loading, or have two different state values, one for the first loading and then the image. 您也可以只使用带有源的Image，让RN处理加载，或者具有两个不同的状态值，一个用于第一次加载，然后是图像。 The thing is that you are chaining two fetch requests. 问题是您要链接两个获取请求。
解决方案2
0 2017-10-22 18:13:22
fetch(REQUEST_URL) should be on the same line as return , .done() is not a method of Promise object 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}} /> )
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.