Question

我正在为我的应用程序使用react。我正在学习职位要求。我找到了一个虚拟的api网站Mocky，可以在其中测试我的发布请求。这是我的api link。对于发布请求，我使用了axios。我不知道Mocky API的工作原理。我提出了要求。当我控制台记录输入值时，我可以输入值。但是，当我控制台记录响应时，似乎无法获取数据。我看不到我犯错的地方。

这是我的代码：

import React, { useState } from 'react';
import { API_URLS } from '../utilities';
import axios from "axios";
export default function CreateAccount() {
  const [state, setState] = useState({
    "email": ``,
    "password": ``,
    "loading": false,
    "error": ``
  });
  const onChangeStudent = (e) => {
    setState({
      ...state,
      [e.target.id]: e.target.value
    });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    console.log(state);
    const url = `https://run.mocky.io/v3/15c2b7ec-9f31-4a18-ae60-a7f41e1f39b2`;
    const obj = {
      "email": state.email,
      "password": state.password
    };
    console.log(obj.email); //I can see the input value
    console.log(obj.password);//I can see the input value
    axios
      .post(url, obj)
      .then((res) => {
        console.log(res.data); // it does not show the data
        console.log(res);
      })
      .catch((error) => {
        setState({
          ...state,
          "error": error
        });
      });
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={state.name}
          onChange={onChangeStudent}
          id="email"
          required
        />
        <input
          type="password"
          value={state.password}
          onChange={onChangeStudent}
          id="password"
          required
        />
        <button
          className="btn waves-effect blue lighten-1"
          type="submit"
          name="action"
          disabled={state.loading}
        >
          {state.loading ? `loading...` : `save`}
        </button>
      </form>
    </div>
  );
}

Answer 1

您好，您似乎无法发现自己所做的任何事情。

我测试了以下内容，并且对我有用。尝试从.then更改为等待。希望这能解决您的问题。在您的网络标签中签入您的请求是否成功以及是否正在发送正文。

try {
       const response = await axios.post('https://run.mocky.io/v3/4b95050f-2bcc-4c78-b86e-6cac09372dce', data);
       console.log("Response", response);
     } catch(e) {
         console.error(e);
     }

React axios发布请求未发送数据

1 个答案: