Question

我收到了这个错误，而且非常令人费解

未捕获（承诺）TypeError：无法读取属性＆＃39; name＆＃39;的未定义在App.updateInfo（App.js：25）在FormContainer.js：28

这些是这两个

 nameOfCity: results.city.name,

和这个

this.props.updateInfo(results);

问题在于，例如，如果我进入城市＆＃34;萨格勒布＆＃34;一切都回来了。但任何其他城市我都会收到这个错误。我尝试重新启动服务器，清除缓存但没有任何作用。

class App extends Component {

render() {
return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Weather App</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
      <FormContainer label="Name of the city:"/>
      <WeatherInfo
          nameOfCity={this.state.nameOfCity}
          weatherDescription={this.state.weatherDescription}
          windSpeed={this.state.windSpeed}
          temperature={this.state.temperature}
          maxTemperature={this.state.maxTemperature}
          minTemperature={this.state.minTemperature}
      />
  </div>
);
}
}
export default App;

表格容器

class FormContainer extends Component {

constructor(props) {
    super(props);
    this.state = {
        cityName: '',
        nameOfCity:'',
        weatherDescription:'',
        windSpeed:'',
        temperature:'',
        maxTemperature:'',
        minTemperature:''
    };
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleCityName = this.handleCityName.bind(this);
}

handleFormSubmit(e) {
    e.preventDefault();

    const SendForm = {
        cityName: this.state.cityName
    };
    console.log(SendForm);
    fetch(`http://api.openweathermap.org/data/2.5/forecast/weather?q=${SendForm.cityName}&units=metric&APPID=********`)
        .then(res => res.json())
        .then(results => {
            this.setState({
                nameOfCity: results.city.name,
                weatherDescription: results.list[0].weather[0].description,
                windSpeed: results.list[2].wind.speed,
                temperature: results.list[0].main.temp,
                maxTemperature: results.list[0].main.temp_max,
                minTemperature: results.list[0].main.temp_min
            });
        });
}

handleCityName(value) {
    this.setState({ cityName: value });
}

render() {
    return (
        <div>
        <form onSubmit={this.handleFormSubmit}>
            <label>{this.props.label}</label>
            <SearchBar
                name="CityName"
                type="text"
                value={this.state.cityName}
                placeholder="search"
                onChange={this.handleCityName}
            />
            <button type="submit"
                    className=""
                    value='Submit'
                    placeholder="Search" />
        </form>

        </div>
    );
}
}

export {FormContainer};

搜索栏组件

const SearchBar = (props) => (
<div>
    <label>{props.label}</label>
    <input name={props.name} type={props.inputType} value={props.value} placeholder={props.placeholder} onChange={(e)=>props.onChange(e.target.value)}/>
</div>
);

export default SearchBar;

和天气信息组件

const WeatherInfo = (props) => (
<div>
    <ul>
        <li>{props.nameOfCity}</li>
        <li>{props.weatherDescription}</li>
        <li>{props.windSpeed}</li>
        <li>{props.temperature}</li>
        <li>{props.maxTemperature}</li>
        <li>{props.minTemperature}</li>
    </ul>
</div>
);

export default WeatherInfo;

编辑： -

现在，在行中有五个提交后，我得到了同样的错误。我做了console.dir，我得到了

Object cod:"0" message:"Error" .

我检查了api我每分钟有60个电话

未捕获（承诺）TypeError：无法读取属性＆＃39; name＆＃39;未定义的

0 个答案: