Question

我在反应原生中相当新。我向webservice发了一个获取请求，然后在List上输入响应（我使用native-base）。

我的问题是在Android上，对webservice的请求需要很长时间，例如最长的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 {
    "_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",
}

Answer 1

这不是fetch API的问题，它是由于解析了巨大的响应数据，因为解析数据在react-native中是一项非常昂贵的任务，并且需要优化，在列表视图中，如果可以，可以提供更好的解决方案分享您的回复数据。

React native fetch请求非常慢的android

1 个答案: