javascript - React fetch / doPost 没有返回数据

Question

我正在尝试在反应中提交一个表单，提交后，输入将被传递到后端，并且一些结果将被传回。但是，我的代码没有将任何内容传递回客户端。调用了 doPost() 函数，但没有写回任何内容。

这是我的反应形式

var React = require("react");
var ReactDOM = require("react-dom");

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      address: "",
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(evt, field) {
    this.setState({ [field]: evt.target.value });
  }

  handleSubmit() {
    fetch("/sandbox", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(this.state)
    }).then(response => response.json())
        .then(data => console.log(data));
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
      <p>Enter your name</p>
      <input
        name = 'name'
        type='text'
        onChange={(event) => this.handleChange(event, "name")}
       <p>Enter your address</p>
      <input
        name = 'address'
        type='text'
        onChange={(event) => this.handleChange(event, "address")}
      />
      <input
        type='submit'
      />
      </form>
    );
  }
}

这是我的后端 java 代码

@WebServlet({ "/sandbox" }) 
public class test extends HttpServlet {
    private static final ObjectMapper objectMapper = new ObjectMapper();
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        SandBoxInputPoJo sandBoxInputPoJo = new SandBoxInputPoJo(req.getParameter("name"),req.getParameter("address"));

        try {
            String json = objectMapper.writeValueAsString(sandBoxInputPoJo);
            resp.getWriter().write(json);
            resp.setStatus(HttpServletResponse.SC_OK);
        } catch (IOException e) {
            resp.setStatus(HttpServletResponse.SC_BAD_REQUEST);
            System.out.println("Unable to return values for the provider view" + e);
        }

    }

这是我的 pojo 课

@Getter
@AllArgsConstructor
class SandBoxInputPoJo {
    @NonNull private String name;
    @NonNull private String address;
}

标签： javascriptjavareactjsfrontendreact-fullstack