反应原生获取请求非常慢的android

我是react原生的新手。我向webservice发出了一个fetch请求，并将响应输入到一个列表中(我使用原生基础)。

我的问题是在安卓系统上，对webservice的请求花费了很长的时间，例如，在iOS上最长的请求是1分钟，最长的最后20秒，在web上不超过2秒。

我想我没有正确使用React的生命周期。有没有人能给我解释一下我该怎么升级(如果可能的话)？或者如果我做错了什么也可以改变。

getTerrains() {
  this.setState({
    show: true
  });
  fetch(url, {
      method: "POST",
      headers: {
        Accept: "application/text",
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body:
        "surfaceID=" +
        this.state.surface +
        "&p_heureDebut=" +
        this.state.start +
        "&p_date=" +
        this.state.date
    }
  )
    .then(response =>
        (*console.log(response)*, response.text())
    )
    .then(responseText => {
      parseString(responseText, function(err, result) {
        responseText = result;
      });
      let hTerrains = [];
      for (let i = 0; i < responseText.Terrains.creneau.length; i++) {
        let hStart = [];
        let hEnd = [];
        let terDesign = [];
        let terIds = [];
        hStart.push(responseText.Terrains.creneau[i].HEURE_DEBUT.toString());
        hEnd.push(responseText.Terrains.creneau[i].HEURE_FIN.toString());
        terDesign.push(
          responseText.Terrains.creneau[i].TER_DESIGNATION.toString()
        );
        terIds.push(responseText.Terrains.creneau[i].TER_ID.toString());

        hTerrains.push({
          designation: terDesign,
          st: hStart,
          en: hEnd,
          idT: terIds
        });

        this.setState({
          // add for each element in this.state.rTerrains a table of values
          tDesign: terDesign,
          tStart: hStart,
          tEnd: hEnd,
          terID: terIds
        });
      }
      this.setState({
        rTerrains: hTerrains,
        show: false
      });
    })
    .catch(console.log);
}

和渲染：

renderTerrains() {
  let terStart = [];
  let index = 0;
  let idTerrains = [];
  let temp = "";
  for (let item of this.state.rTerrains) {
    idTerrains.push(item.designation);
    terStart.push(
      <ListItem key={index++} noBorder style={{ maxHeight: 60 }}>
        <Left
          style={
            Platform.OS === "android"
              ? Platform.Version <= 22 ? { maxWidth: 30 } : { maxWidth: 50 }
              : { maxWidth: 50 }
          }
        >
          {temp.toString() !== item.designation.toString() ? (
            <Text style={{ color: "#6abe51" }}>T{item.designation} </Text>
          ) : (
            <Text />
          )}
        </Left>
        <Body
          style={{
            alignItems: "center",
            flexDirection: "row",
            flex: 1,
            minWidth: 80
          }}
        >
          <Text style={styles.blue_color}>
            {" "}
            de {item.st} à {item.en}{" "}
          </Text>
        </Body>
        <Right style={{ minWidth: 90 }}>
          <Button
            light
            active
            onPress={() => {
              this.setState({
                id: item.designation,
                begin: item.st,
                finish: item.en,
                tId: item.idT
              });
              this.handleChangeValidation();
            }}
          >
            <Text uppercase style={{ color: "#6abe51" }}>
              Réserver
            </Text>
          </Button>
        </Right>
      </ListItem>
    );
    temp = item.designation;
  }
  return terStart;
}

构造函数和状态：

constructor(props) {
  super(props);
  this.state = {
    date:
      Platform.OS === "android"
        ? today.getDate() +
          "/" +
          (today.getMonth() + 1) +
          "/" +
          today.getFullYear()
        : today.getMonth() +
          1 +
          "/" +
          today.getDate() +
          "/" +
          today.getFullYear(),
    dates: [],
    surface: 1,
    surfaces: [],
    start: ("0" + today.getHours()).slice(-2),
    hours: [],

    rTerrains: [],
    begin: "",
    tStart: [],
    finish: "",
    tEnd: [],
    id: "",
    tDesign: []
  };
  this.getTerrains = this.getTerrains.bind(this);
  this.getPlayer = this.getPlayer.bind(this);
  this.addReservation = this.addReservation.bind(this);

  this.handleChangeDate = this.handleChangeDate.bind(this);
  this.handleChangeSurface = this.handleChangeSurface.bind(this);
  this.handleChangeStart = this.handleChangeStart.bind(this);
  this.handleChangeValidation = this.handleChangeValidation.bind(this);
  this.handleChangeCreation = this.handleChangeCreation.bind(this);
}

以及这些函数的调用：

<Content>
  <ListItem>
    <Button
      style={{alignItems: 'center', flex: 1, backgroundColor: '#06407e', borderRadius: 15}}
      onPress={this.getTerrains}>
        <Text style={{alignItems: 'center', textAlign: 'center', flex: 1}}>Rechercher</Text>
    </Button>
  </ListItem>
</Content>
<Content style={{margin: 2, backgroundColor: "white"}}>
  <Content style={{margin: 20}}>
    <Text
      uppercase
      style={styles.blue_color}>Terrains disponibles : </Text>
  </Content>
  <List>
      {
          this.renderTerrains()
      }
  </List>
</Content>

Console.log(响应)的结果：

Response {
    "_bodyInit": "<?xml version=\"1.0\" encoding=\"utf-8\"?>
    <Terrains>
        <creneau>
            <TER_ID>3b5403ba-14fd-4317-aeef-7d2e56c7c479</TER_ID>
            <TER_DESIGNATION>1</TER_DESIGNATION>
            <HEURE_DEBUT>20:00</HEURE_DEBUT>
            <HEURE_FIN>21:00</HEURE_FIN>
        </creneau>
        <creneau>
            <TER_ID>b671dc7c-4f18-4e2d-900c-0c41529ad190</TER_ID>
            <TER_DESIGNATION>12</TER_DESIGNATION>
            <HEURE_DEBUT>20:00</HEURE_DEBUT>
            <HEURE_FIN>21:00</HEURE_FIN>
        </creneau>
        <creneau>
            <TER_ID>9f84fbc0-b797-4e58-adbf-43695ef88d3f</TER_ID>
            <TER_DESIGNATION>3</TER_DESIGNATION>
            <HEURE_DEBUT>20:00</HEURE_DEBUT>
            <HEURE_FIN>21:00</HEURE_FIN>
        </creneau>
        <creneau>
            <TER_ID>4e2f4322-85d0-44eb-b210-a7e35a2edeb1</TER_ID>
            <TER_DESIGNATION>5</TER_DESIGNATION>
            <HEURE_DEBUT>20:00</HEURE_DEBUT>
            <HEURE_FIN>21:00</HEURE_FIN>
        </creneau>
        <creneau>
            <TER_ID>d6c7d508-fb72-4d91-a5f7-fc17d040f528</TER_ID>
            <TER_DESIGNATION>7</TER_DESIGNATION>
            <HEURE_DEBUT>20:00</HEURE_DEBUT>
            <HEURE_FIN>21:00</HEURE_FIN>
        </creneau>
    </Terrains>",
    "headers": Headers {
        "map": Object {
            "cache-control": Array [
                "private, max-age=0",
            ],
            "content-length": Array [
                "1064",
            ],
            "content-type": Array [
                "text/xml; charset=utf-8",
            ],
            "date": Array [
                "Fri, 02 Feb 2018 12:25:56 GMT",
            ],
            "server": Array [
                "Microsoft-IIS/8.5",
            ],
            "x-aspnet-version": Array [
                 "4.0.30319",
            ],
            "x-powered-by": Array [
                "ASP.NET",
            ],
        },
    },
    "ok": true,
    "status": 200,
    "statusText": undefined,
    "type": "default",
}

转载请注明出处:http://www.jlunlp.com/article/20230331/1516831.html

随机推荐

使用对象反应原生setState
我有一个对象，在登录时会打印以下内容：Object {“空调”：false，“阁楼”：false，“地下室”：false，“浴室”：false，“卧室/生活区”：false，“爬行空间”：false，}我想使用上面的setState。我尝试...
发送一个反应原生(世博会)的应用程序到后台的安卓后退按钮按下与纯JavaScript？
我想让安卓的后退按钮使用纯JavaScript将应用程序发送到后台，但我能找到的唯一解决方案需要在Java中进行更改，我正在努力避免退出世博会。是否有一种方法可以将应用程序发送到后台而不是退出它。
股票反应原生应用程序不会构建在iOS上(asdf?)
我想要一些帮助让一个股票应用程序运行在官方Getting Started之后。我下载了iOS模拟器14.3。我跑步npx react-native init nuprojectcd nuprojectnpx react-native run...
如何使用反应原生导航Wix库为任意页面放置BottomBar
我使用的是react原生导航Wix V2库。我想设计一个登录页，是启动器，没有BottomBar，然后通过点击回车底部转到主页。在主页上，我想有一个BottomBar菜单。问题是，我只能在我的启动器页面上显示BottomBar菜单，而不能在...
反应原生矢量图标/字体在expo cli中不显示图标
我已经建立了布局使用字体在零食博览会的一些图标，但当运行同样的项目在世博会cli的图标不是displayed.It显示作为一个cross.App在零食，但不是在世博会剪辑。我已经尝试谷歌搜索这个问题，但解决方案是更改文件在gradle我没有...
反应原生小米手机axios不工作
我们使用react native开发了一个应用程序。我将离开下面的应用程序的链接，我不知道这是否被禁止。我用axios提取数据，它可以在所有的android设备上工作。但它在小米手机上不起作用。我找不到这样做的原因。const api = ...
反应原生动画的不透明度和位置
我想在我的应用程序中创建一个动画，包括变换视图的位置和不透明度。现在，我所做的就是转换视图，我已经这样做了：const fadeAnim = useRef(new Animated.Value(0)).current useEffect((...
反应原生液体，就像动画分页点
我正在使用以下模块：react-native-app-intro-slider我想在分页中实现以下效果：????const _renderPagination = (activeIndex) = { return ( V...
我应该在我的反应原生git库中签入这个android文件夹吗？
我运行了git status，在android/app/下看到了以下文件，我不确定是否需要将这些文件签入到我的git库中。android/app/.gitignore android/app/app/ android/app/gradle....
继电器和反应原生抽屉的巴别塔
我尝试将relay与react-native-drawer一起使用，但它给我的_this.state.viewport是未定义的。我已经将问题的范围缩小到了巴别塔，但现在不确定是否继续。(编辑)我是在读了这期https://github.c...

吉林大学NLP

反应原生获取请求非常慢的android

随机推荐

相关专题