Javascript React-未处理的拒绝（TypeError）：无法读取属性'；城市'；未定义的

我试图跟随youtube上的一个教程，该教程使用openweathermap api根据用户的两个输入显示某个位置的天气，但我遇到了以下错误：

Unhandled Rejection (TypeError): Cannot read property 'city' of undefined
_callee$
src/App.js:16
  13 | 
  14 | getWeather = async e => {
  15 |   e.preventDefault();
> 16 |   const city = e.target.element.city.value;
     | ^  17 |   const country = e.target.element.country.value;
  18 |   const api_call = await fetch(
  19 |     `api.openweathermap.org/data/2.5/weather?q=${city},${country}&APPID=${API_KEY}`

这里有很多关于类似问题的帖子，人们建议在App.js中添加构造函数并绑定submit和getWeather函数。我一直在尝试，但它给了我一个不同的错误：

TypeError: Cannot read property 'getWeather' of undefined
new App
src/App.js:10
   7 | 
   8 | class App extends React.Component {
   9 |   constructor() {
> 10 |     this.getWeather = this.getWeather.bind(this);
  11 |     this.onSubmit = this.onSubmit.bind(this);
  12 |   }
  13 | 

我的代码目前看起来像这样-App.js:

import React from "react";
import Titles from "./components/Titles.js";
import Form from "./components/Form.js";
import Weather from "./components/Weather.js";

const API_KEY = "ca4d2addb51bf577deda4bf791f7f683";
class App extends React.Component {
  constructor() {
    this.getWeather = this.getWeather.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  getWeather = async e => {
    e.preventDefault();
    const city = e.target.element.city.value;
    const country = e.target.element.country.value;
    const api_call = //makes api call
    const data = await api_call.json();
    console.log(data);
  };
  render() {
    return (
      <div>
        <Titles />
        <Form getWeather={this.getWeather} />
        <Weather />
      </div>
    );
  }
}
export default App;

从“React”导入React；
从“/components/Titles.js”导入标题；
从“/components/Form.js”导入表单；
从“/components/Weather.js”导入天气；
const API_KEY=“ca4d2addb51bf577deda4bf791f7f683”；
类应用程序扩展了React.Component{
构造函数（）{
this.getWeather=this.getWeather.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
}
getWeather=async e=>{
e、 预防默认值（）；
const city=e.target.element.city.value；
const country=e.target.element.country.value；
const api_call=//进行api调用
const data=wait api_call.json（）；
控制台日志（数据）；
};
render（）{
返回(
);
}
}
导出默认应用程序；

Form.js：

import React from "react";

class Form extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.getWeather}>
        <input type="text" name="city" placeholder="City..." />
        <input type="text" name="country" placeholder="Country..." />
        <button>Get Weather</button>
      </form>
    );
  }
}
export default Form;

从“React”导入React；
类形式扩展了React.Component{
render（）{
返回(
天气预报
);
}
}
导出默认表单；

有什么想法吗？谢谢你抽出时间

const city = e.target.element.city.value;

您必须检查响应是否为空。 像这样的

if（e&&e.target&&e.target.element&&e.target.city&&e.target.city.value）

您必须检查响应是否为空。 像这样的

---

if（e&&e.target&&e.target.element&&e.target.city&&e.target.city.value）

错误是说e.target中没有属性

元素

移除
元素
，它将正常工作：

const city = e.target.city.value;
const country = e.target.country.value;

示例：
错误是e.target中没有属性
元素

移除
元素
，它将正常工作：

const city = e.target.city.value;
const country = e.target.country.value;

示例：
Hello rollerpigeon请参考代码了解您的所有错误您有几个。。。请务必阅读每一条评论。

从“React”导入React
从“/Form.js”导入表单；
导入“./App.css”
类应用程序扩展了React.Component{
构造函数（）{
super（）//错误#0，只是必需的
//this.getWeather=this.getWeather.bind（this）；//如果使用函数声明选项#2，则不需要它，但选项#1总是需要它
//this.onSubmit=this.onSubmit.bind（this）；//错误#1-类中未定义onSubmit
此.state={
结果：“空结果”
}
}
//异步getWeather（e）{//声明选项#1
getWeather=async e=>{//声明选项#2
e、 预防默认值（）；
const city=e.target.city.value；//错误#3-以前是e.target.“元素”。city.value--元素？那是什么？
const country=e.target.country.value；//错误#4-以前是e.target.element。--element？
const api_call=等待apiCall（城市、国家）
const data=wait api_call.json（）；
这是我的国家({
结果：数据
})
};
render（）{
报税表（<
div>
你好<
表格getWeather={
这是天气预报
}
/> <
div>{
这个国家的结果
} <
/div><
/div>
);
}
}
职能apiCall（城市、国家）{
返回{
json:（）=>新承诺（（解析）=>{
const r=JSON.stringify({
城市
国家
}，null，2）
setTimeout（（）=>resolve（`Result for:${r}`），1500）
})
}
}
导出默认应用程序；
Hello rollerpigeon请参考代码以了解您的所有错误您有几个错误…请确保阅读每个评论。

从“React”导入React
从“/Form.js”导入表单；
导入“./App.css”
类应用程序扩展了React.Component{
构造函数（）{
super（）//错误#0，只是必需的
//this.getWeather=this.getWeather.bind（this）；//如果使用函数声明选项#2，则不需要它，但选项#1总是需要它
//this.onSubmit=this.onSubmit.bind（this）；//错误#1-类中未定义onSubmit
此.state={
结果：“空结果”
}
}
//异步getWeather（e）{//声明选项#1
getWeather=async e=>{//声明选项#2
e、 预防默认值（）；
const city=e.target.city.value；//错误#3-以前是e.target.“元素”。city.value--元素？那是什么？
const country=e.target.country.value；//错误#4-以前是e.target.element。--element？
const api_call=等待apiCall（城市、国家）
const data=wait api_call.json（）；
这是我的国家({
结果：数据
})
};
render（）{
报税表（<
div>
你好<
表格getWeather={
这是天气预报
}
/> <
div>{
这个国家的结果
} <
/div><
/div>
);
}
}
职能apiCall（城市、国家）{
返回{
json:（）=>新承诺（（解析）=>{
const r=JSON.stringify({
城市
国家
}，null，2）
setTimeout（（）=>resolve（`Result for:${r}`），1500）
})
}
}
导出默认应用程序；
您可以尝试
e.target.value.element.city.value
。我不知道此api如何返回json，但函数似乎没有看到它。如果这不起作用，请尝试
e.target.city.value
。您需要在构造函数中调用超级构造函数-将道具传递到构造函数中并添加超级（道具）；.super调用必须在使用“this”之前完成。您可以尝试
e.target.value.element.city.value
。我不知道此api如何返回json，但函数似乎没有看到它。如果这不起作用，请尝试
e.target.city.value
。您需要调用super-con