javascript - 如何在 native react 中延迟获取请求时组件的渲染？

Question

在获取请求时，如何暂停渲染？因为在我的代码中，我在单击按钮时获取请求服务器，并且在此之后渲染获取的响应。但是渲染发生在获取之前，所以我变得不确定当我在 render 中映射 responseData 时的值。以下是我的代码

已更新

screen.js

import { article } from "./data";
import PopupDialog from "react-native-popup-dialog";
import AddNewarticle from "./AddNewarticle";

class SecondScreen extends Component {
  state = { res: [] };
  constructor() {
    super();

    this.initialState = {
      modalVisible: false,
      Disable_Button: false,
      ViewArray: []
    };
    this.state = this.initialState;
    this.animatedValue = new Animated.Value(0);
    this.Array_Value_Index = 0;
  }
  Add_New_View_Function = () => {
    this.animatedValue.setValue(0);

    let New_Added_View_Value = { Array_Value_Index: this.Array_Value_Index };

    this.setState(
      {
        Disable_Button: true,
        ViewArray: [...this.state.ViewArray, New_Added_View_Value]
      },
      () => {
        Animated.timing(this.animatedValue, {
          toValue: 1,
          duration: 400,
          useNativeDriver: true
        }).start(() => {
          this.Array_Value_Index = this.Array_Value_Index + 1;

          this.setState({ Disable_Button: false });
        });
      }
    );
  };

  onPressButton() {
    onPressSubmit();
    Add_New_View_Function();
  }
  onPressSubmit() {
    fetch("xxxxx", {
      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,
          loaded: true
        });
      })
      .catch(() => {
        this.setState({ showLoading: true });
      });
  }

  render() {
    const AnimationValue = this.animatedValue.interpolate({
      inputRange: [0, 1],

      outputRange: [-59, 0]
    });
    let Render_Animated_View = this.state.ViewArray.map((item, key) => {
      if (key == this.Array_Value_Index) {
        return (
          <Animated.View
            key={key}
            style={[
              styles.Animated_View_Style,
              {
                opacity: this.animatedValue,
                transform: [{ translateY: AnimationValue }]
              }
            ]}
          >
            <Text />
          </Animated.View>
        );
      } else {
        return (
          <View key={key} style={styles.Animated_View_Style}>
            {this.state.res.map(a => (
              <TouchableOpacity onPress={() => console.log("clicked")}>
                <CardSection>
                  <View style={{ flexDirection: "row" }}>
                    <Text style={styles.textStyle}>{a.title}</Text>
                  </View>
                </CardSection>
              </TouchableOpacity>
            ))}
          </View>
        );
      }
    });
    return (
      <View style={styles.MainContainer}>
        <ScrollView>
          <View style={{ flex: 1, padding: 2 }}>{Render_Animated_View}</View>
        </ScrollView>

        <TouchableOpacity
          activeOpacity={0.7}
          style={styles.TouchableOpacityStyle}
          disabled={this.state.Disable_Button}
          onPress={() => this.popupDialog.show()}
        >
          <Image
            source={{
              uri:
                "https://reactnativecode.com/wp-content/uploads/2017/11/Floating_Button.png"
            }}
            style={styles.FloatingButtonStyle}
          />
        </TouchableOpacity>
        <PopupDialog
          ref={popupDialog => {
            this.popupDialog = popupDialog;
          }}
          dialogStyle={{ backgroundColor: "#f2ddd5", height: 100 }}
          containerStyle={{ zIndex: 50, elevation: 100 }}
          overlayBackgroundColor="#000"
          dismissOnTouchOutside={true}
        >
          <View>
            <TextInput
              style={{ height: 40 }}
              placeholder="Enter the url you want to save!"
              multiline
              onChangeText={url => this.setState({ url })}
              underlayColor="#fcc9b5"
            />

            <Button title="Ok" onPress={() => this.onPressButton.bind(this)} />
          </View>
        </PopupDialog>
      </View>
    );
  }
}
export default SecondScreen;

已更新

目前我正在获取 article (包含文章列表的 json 数据)并使用获取响应渲染一些卡片，即标题显示在卡片中。在其末尾将有一个添加按钮，单击该按钮将显示一个弹出窗口，其中将有一个用于粘贴文章链接的字段，通过单击 tick 图标，它将发送到服务器，我将收到 json 响应(res)。因此，我希望渲染此 res 中的数据，并显示带有 res 中的数据的卡片列表。这是怎么做到的？现在我已经尝试了几种方法。所以会有 2 个渲染，我在哪里调用这个 renderArticle？请帮助..希望你明白我在说什么..有任何疑问请随时询问..

Answer 1

IF res 是对象数组

// res = [{title:'article1'},{title:'article2'}] ] 

renderArticle(){
  if(this.state.res.length){
    return this.state.res.map(newarticle =>
      // Your code
    )
  }else {
    return null
  }
}

如果资源采用以下形式

res = {
  article1Detail: {title:'article1'}, 
  article2Detail: {title:'article2'} 
}


renderArticle(){
  if(Object.values(this.state.res).length){
    return Object.values(this.state.res).map(newarticle =>
      // Your code
    )
  }else {
    return null
  }
}