Javascript 等待两个单独的承诺解决，以便更新状态

所以我正在测试一个react组件按钮，点击它可以改变一个状态。当呈现组件时，我需要一个承诺来解析，以便呈现按钮，从而可以单击。我通过在组件状态更新时将按钮单击放置在setTimeout内来实现这一点。但是，单击按钮后，由于承诺正在解决，需要更新组件状态。下面我举一个例子

class App extends component {
     constructor(props){
     this.state ={
         hasError = false;
         loading = true;
   }
}

componentdidMount(){
    this.apiGetFunc();

apiGetFunc(){
  this.setState({hasError: false});
  this.setState({loading = false});
}

onClickFunc{
   this.middleWareCalltoAPI.then(
      respone =>{ this.setState({hasError: false})},
      errorRespone =>{ this.setState({hasError = true})};
   )
}


renderer(){
   return (
     <Card>
     {!this.state.hasError && !this.state.loading && (
     <div>
     <Button>
        onClick = {this.onClickfunc}
     </Button>
     </div>
     </Card>
     )}
   )
}

类应用程序扩展组件{
建造师（道具）{
这个州={
hasError=false；
加载=真；
}
}
componentdidMount（）{
this.apiGetFunc（）；
apiGetFunc（）{
this.setState（{hasError:false}）；
this.setState（{loading=false}）；
}
onClickFunc{
这个，米德尔瓦里呼叫阿皮(
respone=>{this.setState（{hasError:false}}），
errorRespone=>{this.setState（{hasError=true}}）；
)
}
渲染器（）{
返回(
{！this.state.hasError&&！this.state.loading&&(
onClick={this.onClickfunc}
)}
)
}

下面是我的测试结果

test("Save user permissions", done => {
  mock.onGet("anAPI.php").reply(200, mockData); //THIS IS NEEDED TO RENDER THE BUTTON
  const wrapper = shallow(<App />);

  setTimeout(() => {
    wrapper.find("Button").simulate("click"); //THIS CLICK SHOULD CHANGE hasError to true
    expect(wrapper.state.hasError).toEqual(true) //THIS FAILS
    done();
  }, 0);
});

test（“保存用户权限”，完成=>{
mock.onGet（“anAPI.php”）.reply（200，mockData）；//呈现按钮时需要此选项
常量包装器=浅（）；
设置超时（（）=>{
wrapper.find（“Button”）.simulate（“click”）；//此单击应将hasError更改为true
expect（wrapper.state.hasError）.toEqual（true）//此操作失败
完成（）；
}, 0);
});

我已尝试嵌套设置超时，以便单击的承诺可以解决，但这似乎不起作用。我尝试尽可能精简代码，使其可读。如果需要我提供更多上下文，请告诉我

---

编辑：使代码更接近于我实际拥有的代码

上面的示例代码中有许多错误，我强烈建议您在尝试前进之前，花一些时间做一些简单的React教程

然而，这里有一个有效的例子

工作示例：（您可以通过单击屏幕左下角附近的

测试

选项卡来运行测试）

api/fakeAPI.js

const data = [
  {
    userId: 1,
    id: 1,
    title: "delectus aut autem",
    completed: false
  },
  {
    userId: 1,
    id: 2,
    title: "quis ut nam facilis et officia qui",
    completed: false
  },
  {
    userId: 1,
    id: 3,
    title: "fugiat veniam minus",
    completed: false
  },
  {
    userId: 1,
    id: 4,
    title: "et porro tempora",
    completed: true
  },
  {
    userId: 1,
    id: 5,
    title: "laboriosam mollitia et enim quasi adipisci quia provident illum",
    completed: false
  }
];

export const fakeAPI = {
  failure: () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("No data was found!");
      }, 1000);
    }),
  success: () =>
    new Promise(resolve => {
      setTimeout(() => {
        resolve(data);
      }, 1000);
    })
};

import React, { Component } from "react";
import ShowData from "../ShowData/showData";
import ShowError from "../ShowError/showError";
import { fakeAPI } from "../../api/fakeAPI";

export default class App extends Component {
  state = {
    data: [],
    hasError: "",
    isLoading: true
  };

  componentDidMount = () => {
    this.fetchData();
  };

  fetchData = () => {
    fakeAPI
      .success()
      .then(data => this.setState({ isLoading: false, data: data }))
      .catch(err => this.setState({ isLoading: false, hasError: err }));
  };

  handleClick = () => {
    this.setState({ isLoading: true, data: [] }, () => {
      fakeAPI
        .failure()
        .then(res => this.setState({ isLoading: false, hasError: "" }))
        .catch(err => this.setState({ isLoading: false, hasError: err }));
    });
  };

  render = () => (
    <div className="app-container">
      {this.state.isLoading ? (
         <ShowLoading />
      ) : this.state.hasError ? (
        <ShowError error={this.state.hasError} />
      ) : (
        <ShowData data={this.state.data} handleClick={this.handleClick} />
      )}
    </div>
  );
}

组件/App/App.js

const data = [
  {
    userId: 1,
    id: 1,
    title: "delectus aut autem",
    completed: false
  },
  {
    userId: 1,
    id: 2,
    title: "quis ut nam facilis et officia qui",
    completed: false
  },
  {
    userId: 1,
    id: 3,
    title: "fugiat veniam minus",
    completed: false
  },
  {
    userId: 1,
    id: 4,
    title: "et porro tempora",
    completed: true
  },
  {
    userId: 1,
    id: 5,
    title: "laboriosam mollitia et enim quasi adipisci quia provident illum",
    completed: false
  }
];

export const fakeAPI = {
  failure: () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("No data was found!");
      }, 1000);
    }),
  success: () =>
    new Promise(resolve => {
      setTimeout(() => {
        resolve(data);
      }, 1000);
    })
};

import React, { Component } from "react";
import ShowData from "../ShowData/showData";
import ShowError from "../ShowError/showError";
import { fakeAPI } from "../../api/fakeAPI";

export default class App extends Component {
  state = {
    data: [],
    hasError: "",
    isLoading: true
  };

  componentDidMount = () => {
    this.fetchData();
  };

  fetchData = () => {
    fakeAPI
      .success()
      .then(data => this.setState({ isLoading: false, data: data }))
      .catch(err => this.setState({ isLoading: false, hasError: err }));
  };

  handleClick = () => {
    this.setState({ isLoading: true, data: [] }, () => {
      fakeAPI
        .failure()
        .then(res => this.setState({ isLoading: false, hasError: "" }))
        .catch(err => this.setState({ isLoading: false, hasError: err }));
    });
  };

  render = () => (
    <div className="app-container">
      {this.state.isLoading ? (
         <ShowLoading />
      ) : this.state.hasError ? (
        <ShowError error={this.state.hasError} />
      ) : (
        <ShowData data={this.state.data} handleClick={this.handleClick} />
      )}
    </div>
  );
}

---

如果你能提供一个很好的示例，那么回答一个有最小完整工作示例的问题是最容易的。一般来说，当异步代码从测试中的函数返回并且

wait

-able时，使用承诺测试异步代码最有效。我要去参加一个会议，但当我完成后，我会在更新的代码中添加一些工作的东西我希望是一个工作示例的代码谢谢。我会尝试一下。为代码道歉。我在QA实习了一个月，这是我第一次与React合作。不过我一定会查看更多教程。当然。我强烈建议在本教程上投入一些时间和金钱：。这位特别的老师做得很好在解释时做出反应。