Javascript 我无法在react项目中从openWeather中提取数据

因此，我使用fetchapi从openweather中提取数据，但是当我将响应转换为json时，我得到一个错误，即它不能转换为json格式。相反，当我将json响应记录到控制台时，它工作得很好

这就是错误：

允诺{}proto：允诺{[PromiseStatus]]：“履行”[[promisesvalue]]：Objectbase:“站点”云：{all:75}cod:200coord:{lon:80.92，lat:26.85}dt:1598628247id:1264733main:{temp:302.15，感觉像：308.06，temp\min:302.15，temp\u-max:302.15，pressure:1000，}名称：“勒克瑙”系统类型：1，id:9176，国家：{，日出：1598573655，日落：1598619675}时区：19800能见度：4000天气：[{…}]风：{速度：2.6度：50}proto：对象 OpenWeather.js:14

未捕获（承诺中）TypeError:未能对“响应”执行“json”：正文流已锁定 在OpenWeather.js:14 （匿名）@OpenWeather.js:14

这是我的开放天气组件：

let apiKey = '********************'


  


let openWeather = {

search(value){

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${value}&appid=${apiKey}`).then(
      (response)=>{
        console.log(response.json())  
        return response.json() }
  )


}

}

export default openWeather;

import React from 'react';

import './App.css';
import SearchBar from '../searchbar/searchbar'
import SearchResults from '../SearchResults/searchresults'
import openWeather from '../../utils/OpenWeather/OpenWeather'

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      searchresults:[{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations",
      "main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15
    },"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}]

(**Hard code**)
    }
    this.search = this.search.bind(this);
  }

search(value){

  openWeather.search(value).then((jsonResponse)=>{
    this.setState({searchresults : jsonResponse})
  })

}


  render(){
  return (
    <div className="App">
      <header className="App-header">
       <h1>Wanderer</h1> 
      </header>
      <SearchBar onSearch ={this.search} />

      <SearchResults searchresults ={this.state.searchresults}
                        />
    </div>
  );
}
}

export default App;

这是父组件：

let apiKey = '********************'


  


let openWeather = {

search(value){

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${value}&appid=${apiKey}`).then(
      (response)=>{
        console.log(response.json())  
        return response.json() }
  )


}

}

export default openWeather;

import React from 'react';

import './App.css';
import SearchBar from '../searchbar/searchbar'
import SearchResults from '../SearchResults/searchresults'
import openWeather from '../../utils/OpenWeather/OpenWeather'

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      searchresults:[{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations",
      "main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15
    },"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}]

(**Hard code**)
    }
    this.search = this.search.bind(this);
  }

search(value){

  openWeather.search(value).then((jsonResponse)=>{
    this.setState({searchresults : jsonResponse})
  })

}


  render(){
  return (
    <div className="App">
      <header className="App-header">
       <h1>Wanderer</h1> 
      </header>
      <SearchBar onSearch ={this.search} />

      <SearchResults searchresults ={this.state.searchresults}
                        />
    </div>
  );
}
}

export default App;

从“React”导入React；
导入“/App.css”；
从“../SearchBar/SearchBar”导入搜索栏
从“../SearchResults/SearchResults”导入搜索结果
从“../../utils/openWeather/openWeather”导入openWeather
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
搜索结果：[{“coord”：{“lon”：-0.13，“lat”：51.51}，“天气”：[{“id”：300，“主要”：“毛毛雨”，“描述”：“光强度毛毛雨”，“图标”：“09d”}]，“基地”：“车站”，
“主要”：{“温度”：280.32，“压力”：1012，“湿度”：81，“最低温度”：279.15，“最高温度”：281.15
}“能见度”：10000，“风”：{“速度”：4.1，“度”：80}，“云”：{“所有”：90}，“dt”：1485789600，“系统”：{“类型”：1，“id”：5091，“消息”：0.0103，“国家”：“GB”，“日出”：1485762037，“日落”：1485794875}，“id”：2643743，“名称”：“伦敦”，“鳕鱼”：200}]
（**硬代码**）
}
this.search=this.search.bind（this）；
}
搜索（值）{
openWeather.search（value）.then（（jsonResponse）=>{
this.setState（{searchresults:jsonResponse}）
})
}
render（）{
返回(
流浪者
);
}
}
导出默认应用程序；

这是用于执行搜索的searchbar组件

import React from 'react'
import './searchbar.css'

class SearchBar extends React.Component {

constructor(props){
    super(props)

    this.state = {value:''}
    this.search = this.search.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
}


search(){
    this.props.onSearch(this.state.value)
}

handleSearch(event){
    this.setState({value:event.target.value});
}

    render(){

        return(
            <div className="SearchBar">
            <input placeholder="Enter A City or Country Name" onChange={this.handleSearch} />
            <button className="SearchButton" onClick ={this.search} >SEARCH</button>
          </div>
        )
    }
}


export default SearchBar;

从“React”导入React
导入“./searchbar.css”
类SearchBar扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={value:''}
this.search=this.search.bind（this）；
this.handleSearch=this.handleSearch.bind（this）；
}
搜索（）{
this.props.onSearch（this.state.value）
}
handleSearch（事件）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
搜寻
)
}
}
导出默认搜索栏；