Javascript 如何更改获取调用和重新加载屏幕？

我有一个React本机应用程序，它正在与PostgresDB进行通信，并抛出了一个ExpressJSRESTAPI

我有一个fetchcall，它返回一些我想在我的应用程序中显示的数据。它使用两个参数调用路由。一个是存储在AsyncStorage中的用户ID，另一个是存储在我的状态中的选定日期

我的问题是，当日期状态更改时，应该更新获取url，然后返回给定日期的数据。目前，它不会重新显示屏幕，但日期会更改。有没有一种具体的方法告诉我的fetch查询应该重新加载

例如：

`http://myip/api/hours/daydata/${realDate}/${userid}`

是我的fetchurl，realDate是this.state.date，userid是异步存储存储的userid

`http://myip/api/hours/daydata/2019-11-06/138`

此url返回给定日期和用户所需的数据

在按钮上单击“我的日期”状态更改，例如更改为2019-11-07。

`http://myip/api/hours/daydata/2019-11-07/138`

这将是下一步应该获取的新url，我希望重新启动屏幕以查看更改。但它不会重播

这里有一些代码：

 async fetchData() {
    let realDate = this.state.date;
    await getData("userid")      // asyncStorage gets userid correctly
      .then(data => data)
      .then(value => this.setState({ userid: value }))
      .catch(err => console.log("AsyncS_Error: " + err));

    const userid = this.state.userid;
    console.log("cpmDM id_ " + userid);


    await fetch(
      `http://myip/api/hours/daydata/${realDate}/${userid}`
      )
      .then(console.log("realD8_: " + realDate))
      .then(res => res.json())
      // .then(res => console.log(res))
      .then(res => {
        console.log(res[0].remark);
        return this.setState({ 
          remark: res[0].remark
        });
      }) 
      .catch(err => console.log(err));
  }


componentDidMount() {
    this.fetchData();
  }

我希望得到一个重播，因为我打电话给setState的评论。 在第一次渲染中，来自第一个选定日期的备注会显示出来，但随着我更改日期，备注会保留并且不会更新

想法：

有没有办法记录当前的fetchurl？我需要像componentWillUpdate这样的东西吗

编辑：这是更新我的状态的方式：

dateForwardHandler = () => {
    console.log("Current Date:", this.state.date);

    const newDate = Moment(this.state.date).add(1, "d").format("YYYY-MM-DD");
    this.setState({ date: newDate.toString() });

    console.log("Current Date:", this.state.date);
  };

编辑2.0：

在dateBackHandler和dateForwardHandler中调用fetchData（）实际上是在向我显示需要它们的不同备注，但不知何故，它们是1天的休息时间。如果我追溯到25.10，我会从26.10得到评论，当我回到24.10，我会从25.10得到评论

似乎该组件在第一次按下时没有更新，但在第二次按下时更新，因此需要休息一天

苏：谢谢你们给我的帮助

我想告诉你应用程序当前的运行情况

dateForwardHandler = () => {
    console.log("Current Date:", this.state.date);

    const newDate = Moment(this.state.date).add(1, "d").format("YYYY-MM-DD");
    this.setState({ date: newDate.toString() });

    console.log("Current Date:", this.state.date);

    this.fetchData();   // THIS CALL IS NEW 
  };

通过调用this.fetchData（）；在状态改变和按下按钮后，我会看到一些不同的评论，但我有一个问题，那就是它总是休息一天。因此前端和fetchcall不会同时更新。 但我认为首先将state.date设置为新日期，然后调用fetchData是正确的

---

感谢迄今为止的所有帮助；）

您不必返回

this.setState

，因此

return this.setState({ 
 remark: res[0].remark
});

使用

---

为什么您需要您所在州的当前日期，并在需要时随时更新？你不能只做：

let currentDate = Moment().add(1, "d").format("YYYY-MM-DD").toString()

---

通过这种方式，您不会在每次更新日期时强制重新渲染，而在获取日期时仍然使用日期进行获取。首先，我不会将两次等待放在一个异步函数中。这可能是因为您的用户ID无法及时为您的fetch方法检索

关于重新渲染，请尝试首先返回fetchData（res.json）的结果，然后在异步函数外部设置state

编辑：

正如您提到的，您希望在单击按钮时执行此操作，它可能看起来有点像这样：

fetchData = (url, method) => {
    let error;
    return fetch(url, {
      method: method,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    }).then((response) => {
      if (response.ok) {
        return response.json().then(response => ({ response })).catch((error) => { console.log("JSON cannot be parsed") });
      } 
      error = JSON.stringify(response);
      return ({ error });
    }).catch((error) => {
      console.log("Promise rejected");
    });
  }



onButtonPress = async () => {    
    const userid = this.state.userid;
    const realDate = this.state.realDate;
    const { response, error } = await this.fetchData('http://myip/api/hours/daydata/${realDate}/${userid}', 'GET'); 
    if (response) {
        console.log(response);
        this.setState({ 
          remark: response[0].remark
        });
    } else {
        console.error("Error: " + error);
    }
}

---

更改状态中的

date

属性后是否调用

fetchData

？类似于

this.setState（{date:newDate}，fetchData）

？当您更改日期时，是否使用新选择的日期更新

realDate

的状态？请检查我的编辑ty以获取您的响应。您可以调用此.fetchData（）；在设置新的日期值之后，即在此.setState（{date:newDate.toString（）}）之后；为什么您需要用当前日期更新您的状态？你不能在抓取之前得到当前日期吗？具有

let realDate=Moment（）.添加（1，“d”）.格式（“YYYY-MM-DD”）.toString（），这样日期将始终是最晚的。临时修复将使用此。forceUpdate（）可能是，但您不应使用此。forceUpdate（）因为它不会对流作出反应来强制执行这样的重新加载。当我运行时，日期应该是今天的日期，如果我单击“前进”或“后退”按钮，则显示db中存储的所选日期的备注的日期应该更改。我真的不明白你的方法你的意思是我应该在取回之前把它叫做什么？因为这个方法在当前日期的基础上增加了一天，你能用我的代码告诉我你的方法吗？另外，我的用户ID会存储在登录页面上，并且它是在第一次等待中，所以它不应该一直存在吗？@yesIamFaded我在我的回答中添加了一个示例谢谢，我会研究它。
fetchData = (url, method) => {
    let error;
    return fetch(url, {
      method: method,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    }).then((response) => {
      if (response.ok) {
        return response.json().then(response => ({ response })).catch((error) => { console.log("JSON cannot be parsed") });
      } 
      error = JSON.stringify(response);
      return ({ error });
    }).catch((error) => {
      console.log("Promise rejected");
    });
  }



onButtonPress = async () => {    
    const userid = this.state.userid;
    const realDate = this.state.realDate;
    const { response, error } = await this.fetchData('http://myip/api/hours/daydata/${realDate}/${userid}', 'GET'); 
    if (response) {
        console.log(response);
        this.setState({ 
          remark: response[0].remark
        });
    } else {
        console.error("Error: " + error);
    }
}