个人中心
gpt4 book ai didi

android - react native 获取请求非常慢的android

转载 作者：太空狗 更新时间：2023-10-29 13:05:24 26 4
gpt4 key购买 nike

我是 React Native 的新手。我向 webservice 发出了一个获取请求，并将响应输入到一个列表中(我使用 native-base)。

我的问题是在 Android 上，对 web 服务的请求需要很长时间，例如最长 1 分钟，但在 iOS 上最长持续 20 秒，在网络上不超过 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) 的结果:

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",
}

最佳答案

不是fetch API的问题，是解析海量响应数据的问题，因为解析数据在react-native中是一个非常昂贵的任务，需要优化，在 ListView 中，如果可以的话，可以提供更好的解决方案分享您的回复数据。

关于android - react native 获取请求非常慢的android，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48578371/

26 4 0
文章推荐： android - 标记来自 Google Maps Directions API 响应的高速公路
文章推荐： html - 现在是否已弃用小程序？
文章推荐： css - 使用 Css 旋转 SVG(动画)
文章推荐： java - 闹钟管理器不适用于 Android 中的多个闹钟
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com