如何通过 axios get url 在 React 中传递状态值？答案

【问题标题】：How to pass state values via the axios get url in React?如何通过 axios get url 在 React 中传递状态值？
【发布时间】：2021-11-13 22:49:03
【问题描述】：

我现在要做出反应，我想通过已保存为状态的 Axios URL 传递一个值。我怎样才能传递这个值？我通过 get 方法通过从上一个链接传递 id 来检索 empno；

 componentDidMount() {
    this.retrievePosts();
  }

  retrievePosts() {
    const id = this.props.match.params.id;
    console.log(id);
    axios.get(`http://localhost:5000/employees/${id}`).then(res => {
      if (res.data.success) {
        this.setState({
          empno: res.data.employee.empno,
          
        });
      }
    });

我试图在同一个retrievePosts() 方法中传递empno 以获得另一个值。我目前是这样实现的：

    axios.get(`http://localhost:5000/employees/alocation/${this.state.empno}`).then(res => {
        if (res.data.success) {
          this.setState({
              totalallocation: res.data.allocationcount,
            });

            console.log(this.state.totalallocation);
          }
        });

  }

该值似乎永远不会通过，因为它的输出为“未定义”。怎么传递通过URL接收到的empno状态值？

【问题讨论】：

console.log(res.data) 给你什么？
GET localhost:5000/employees/alocation 400 (Bad Request) 这是我尝试传递值时得到的结果。第一个 GET 方法实际上得到了 empno 的值，我用控制台日志检查过。
我试图传递一个 int 值，我通过邮递员检查了后端，它成功运行，只有当我尝试通过前端传递 int 值时才会出现问题
嗨，会不会像第二个 URL 中的拼写错误一样简单，你有“alocation”，这应该是分配吗？

标签： reactjs react-hooks react-router

【解决方案1】：

您需要使您的代码异步才能使其工作。像这样添加async

async   retrievePosts() {...}

然后是awaitaxios

【讨论】：

【解决方案2】：

为了获得正确的值，第二个“get”调用必须在第一个调用之后发生，但这里（不一定）不是这种情况 - 所以你必须选择：

不要使用状态，而是从第一个的“then”块内部进行第二个 axios 调用。这样，您就可以确保它是按顺序发生的。
不使用承诺，而是在异步事务中使用 axios： https://www.better.dev/asynchronous-javascript-using-async-await

【讨论】：

非常感谢我也会试试的