React Native 中获取后的条件渲染
Posted
技术标签:
【中文标题】React Native 中获取后的条件渲染【英文标题】:Conditional rendering after fetch in react native 【发布时间】:2019-01-17 16:56:07 【问题描述】:react native fetch 后如何进行条件渲染?之后我不想渲染组件
1.使用responseData
成功获取
2.网络请求失败
3.如果服务器返回空responseData
现在我只显示成功的结果。我也想显示失败的情况。如何在获取失败后呈现Text
组件。以下是我的代码
onPressSubmit()
fetch("xxxx",
method: "POST",
headers:
Accept: "application/json",
"Content-Type": "application/json"
,
body: JSON.stringify(
url: this.state.url
)
)
.then((response) => response.json())
.then((responseData) =>
this.setState(
res:responseData.message,
showLoading: false
, () => console.log(this.state.res));
).catch((error) =>
console.error(error);
);
renderArticle()
const title = this.state.res;
const image = this.state.res;
const text = this.state.res;
const id = this.state.res;
const author =this.state.res;
const html = this.state.res;
return (
<TouchableOpacity
onPress=() => Actions.addNewarticle(heading:title, authorname:author, description:text, htmlcon:html)
>
<CardSection>
<View style= flexDirection: "row" >
<Image
source= uri:image
style=styles.thumbnail_style
/>
<Text style=styles.textStyle>title</Text>
</View>
</CardSection>
</TouchableOpacity>
);
render()
return(
<View>
this.renderArticle()
</View>
);
【问题讨论】:
【参考方案1】:创建renderNetworkFailure
方法,您可以在其中显示您想要的任何内容。进入render
方法。检查您的响应数据是否可用?我检查了空白字符串。
render()
const isResponseData = (this.state.res == '') ? this.renderNetworkFailure() : this.renderArticle()
return(
<View>
isResponseData
</View>
);
【讨论】:
如果responseData
为空,我可以再给出一个条件吗?
为什么不呢?这取决于您的要求。
那会怎样?你能检查一下这个const isResponseData = (this.state.res == '') ? this.renderNetworkFailure() : this.renderArticle() :this.renderEmptyData()
不,它是一个三元运算符。就像其他的一样。 ?
是 if
和 :
是 else
【参考方案2】:
我认为更准确地说,这就是您的答案的样子,如果您也想显示网络故障,那么您还必须为其保留一个状态变量。(我也是 react-native 的初学者,请更正如果有什么问题)
render()
return(
<View>
(this.state.err)?this.networkFailure():(this.state.res.length? this.renderArticle():this.renderNothing())
</View>
)
【讨论】:
以上是关于React Native 中获取后的条件渲染的主要内容,如果未能解决你的问题,请参考以下文章
Native Base Picker [React Native] 项目的条件渲染