向 API 发送表单提交问题 [重复]答案

【问题标题】：Issue sending form submittion to API [duplicate]向 API 发送表单提交问题 [重复]
【发布时间】：2022-12-11 11:09:14
【问题描述】：

我正在使用 React、JS 和一些基本的 HTML 构建一个基本的表单提交应用程序。在应用程序中，我将表单提交的结果作为 POST 请求发送到 API。

我面临的问题是我看到了与 API 的连接（每次提交都获得 200），但我输入到表单的值显示为未定义。我相信这与在我的代码中使用 handleSubmit 函数有关，但我不知道如何发送表单数据本身。

我的代码示例如下：

class Form extends React.Component {
  constructor(props) {
    super(props);

    // declare input fields in state
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // handle change events
  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  };

  // handle submission events
  handleSubmit = (events) => {
    const username = "- username -";
    const password = "- password - ";

    let data = `${username}:${password}`;
    let encodedString = btoa(data);
    let proxyLink = "- proxy URL -";
    let URL = "- endpoint URL -";
    let proxyURL = proxyLink + URL;

    const options = {
      method: "POST",
      body: JSON.stringify(this.state),
      headers: {
        accept: "application/json",
        authorization: `Basic ${encodedString}`,
      },
    };

    fetch(proxyURL, options)
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
    events.preventDefault();
  };

  render() {
    const { values } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>value: </label>
          <input
            type="text"
            value={attibute_name}
            onChange={this.handleChange}
            name="attribute_name"
          />
        </div>
      </form>
    );
  }
}

export default Form;

我试过改变我使用handleSubmit 的方式，甚至将其创建为变量并使用异步函数。这个想法与这个 (https://www.techomoro.com/submit-a-form-data-to-rest-api-in-a-react-app/) 类似，但它导致的结果比我以前的更糟糕。

【问题讨论】：

您是否尝试过将 events.preventDefault( ) 添加到 handleSubmit 函数的顶部？
嘿@smritz 我刚刚试过了，它并没有改变我的结果。然而，我确实修改了我的 handleChange 函数，它现在消除了未定义的值，但我仍然只从 API 获得 200 ping。 handleChange = event => { const thisAttribute = event.target.thisAttribute; this.setState({ [event.target.name]: thisAttribute }); }
使用常规 JavaScript 的 FormData() 构造函数是获取值的一种流行方式。 developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
嘿@RonnieRoyston 我现在正在尝试这个但是我将如何在 handleSubmit 函数中使用 FormData？看起来 FormData 没有在它会从 return () 收集信息的任何地方声明
试试handleChange(event) {而不是handleChange = event => {

标签： javascript reactjs

【解决方案1】：

当您调用您的函数时，您正在传递一个事件。所以你需要在调用你的函数时传入这个。

<input
  type='text'
  value={attibute_name}
  onChange={e => this.handleChange(e)}
  name="attribute_name"
  />

【讨论】：

嘿@tim 我解决了我的问题，这实际上是由于我使用 handleChange 函数的方式。 handleChange = event => { const thisAttribute = event.target.value; this.setState({ [event.target.name]: thisAttribute }); console.log(this.state.name_first) }