javascript - 未捕获的 TypeError：this.onSubmit 不是 React.js 中的函数

Question

我正在尝试使用 React调用开源天气 API 。

但我收到以下错误App.js:59 Uncaught TypeError: this.onSubmit is not a function

这是我的 api 文件：

import axios from 'axios';

var key = 'TK421';
var countryCode = 'us';

export const getWeatherByZip = zipCode => {
  return axios
    .get(`http://api.openweathermap.org/data/2.5/weather?zip=${zipCode},${countryCode}&appid=${key}`)
    .then(resp => resp.data);
}; 

这是我的主/应用文件：

import React, { Component } from 'react';
import * as api from '../utils/api';

import '../scss/app.scss';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zipcode: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    var zip = event.target.value;
    this.setState(function() {
      return {
        zipcode: zip,
      };
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.onSubmit(
      api.getWeatherByZip(this.state.zipcode).then(
        function(zip) {
          this.setState(function() {
            return {
              zipcode: zip,
            };
          });
        }.bind(this)
      )
    );
  }

  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <h2>Open Weather App</h2>
          <div className="row">
            <div className="one-half column">
              <label htmlFor="insertMode">Insert your location</label>
              <input
                className="u-full-width"
                placeholder="please enter your zipcode"
                type="text"
                autoComplete="off"
                value={this.state.zipcode}
                onChange={this.handleChange.bind(this)}
              />
            </div>
            <div className="one-half column">
              <label htmlFor="showMin">show minimum</label>
              <input type="checkbox" />
              <label htmlFor="showMax">show maximum</label>
              <input type="checkbox" />
              <label htmlFor="showMean">show mean</label>
              <input type="checkbox" />
            </div>
          </div>
          <div className="row">
            <div className="two-half column">
              <button className="button-primary" type="submit" disabled={!this.state.zipcode}>
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

在输入和提交表单时如何获得正确的响应？

更新：

handleSubmit(event) {
    event.preventDefault();
    api.getWeatherByZip(this.state.zipcode).then(
      function(zip) {
        console.log('zip', zip);

        this.setState(function() {
          return {
            zipcode: zip,
          };
        });
      }.bind(this)
    );
  }

在我的 JSX 中：

 <div className="container">
        <form
          onSubmit={() => {
            this.handleSubmit;
          }}
        >
          <h2>Open Weather App</h2>
          <div className="row">
            <div className="one-half column">
              <label htmlFor="insertMode">Insert your location</label>
              <input
                className="u-full-width"
                placeholder="please enter your zipcode"
                type="text"
                autoComplete="off"
                value={this.state.zipcode}
                onChange={this.handleChange.bind(this)}
              />
            </div>
            <div className="one-half column">
              <label htmlFor="showMin">show minimum</label>
              <input type="checkbox" />
              <label htmlFor="showMax">show maximum</label>
              <input type="checkbox" />
              <label htmlFor="showMean">show mean</label>
              <input type="checkbox" />
            </div>
          </div>
          <div className="row">
            <div className="two-half column">
              <button className="button-primary" type="submit" disabled={!this.state.zipcode}>
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>

标签： javascriptreactjsaxiosweather-api

Answer 1

您已经将该方法绑定handleSubmit到 formsonsubmit事件，您不需要将此方法的内容包装在this.onSubmit. 这将失败，因为此方法未在代码中的类中定义。

顺便说一句，您this在代码中绑定上下文两次，一次在您的onsubmit事件中，一次在您的构造函数中。只需执行一次就足够了，推荐的位置是在您的构造函数中。