1

反応ネイティブでフェッチ後に条件付きレンダリングを行うにはどうすればよいですか? 1. フェッチが成功した後にコンポーネントをレンダリングしたくない 2.responseData ネットワーク要求が失敗する 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>
);
}
4

2 に答える 2

2

renderNetworkFailure好きなように表示できるメソッドを作成します。メソッドrenderに。応答データが利用可能かどうかを確認しますか? 空白文字列をチェックしています。

render(){
const isResponseData = (this.state.res == '') ? this.renderNetworkFailure() : this.renderArticle()
return(
 <View>
{isResponseData}
 </View>
);
于 2018-08-10T06:37:16.513 に答える