Question

首先，我使用#include <iostream> using namespace std; int main(){ double Celsius; int Farenheit; // defining variables celsius and farenheit cout << " Input temperatue in celsius and press ENTER" << endl; cin >> Celsius; //double Farenheit; Farenheit = ((Celsius*180)/100) + 32; cout << "Value in Farenheit is:"; cout << Farenheit <<endl ; //system("Pause"); return 0; }从远程端点加载用户数据并在此方法中设置状态：

componentDidMount

然后我将一个带有POST请求的用户添加到API中，我想从远程端点加载新的用户数据并再次设置状态，以便看到新的添加内容：

componentDidMount() {
    axios
      .get("http://localhost:8080/api/users")
      .then(res => {
        const users = res.data.map(obj => obj);
        this.setState({ data: users });
      })
}

回叫addUser = () => { var currentThis = this; axios .post("http://localhost:8080/api/users", { Name: this.Name.inputRef.value, Surname: this.Surname.inputRef.value, }) .then(res => { const status = res.data.status; if (status === 'OK'){ axios .get("http://localhost:8080/api/users") .then(res => { const users = res.data.map(obj => obj); currentThis.setState({ data: users }); }) } else{ //error } }) }函数中的请求始终在发布新用户之前响应用户。因此状态不会改变，我必须重新加载页面以显示新添加。

如何在不重新加载页面的情况下更新或呈现响应？

Answer 1

也许您可以使用setState（）的回调来发出第二个AJAX请求？像这样：

addUser = () => {
  var currentThis = this;
  axios
    .post("http://localhost:8080/api/users", {
      Name: this.Name.inputRef.value,
      Surname: this.Surname.inputRef.value,
    })
    .then(res => {
      const status = res.data.status;
      if (status === 'OK'){
        const users = res.data.map(obj => obj);
        currentThis.setState({ data: users }, function() {
            axios.get("http://localhost:8080/api/users")
          }
        });
      else{
        //error
      }
    })
}

More info on the setState() function and its callback param

Answer 2

如果您是这些API的作者，则应该在成功的POST请求时返回更新的用户列表或新用户本身。然后你可以setState使用回复。

如果您没有对API的控制，并且由于您确信status === 'OK'表示已添加新用户，为什么还需要发出另一个GET请求？

只需将新创建的对象添加到data状态，然后添加setState：

if (status === 'OK'){
  const updatedUsers = this.state.data.push(newUser)
  this.setState({data: updatedUsers})
}

如何链接同步请求而不刷新

2 个答案: