陣營不會通過道具API鏈接

http://codepen.io/beckbeach/pen/mWqrep我codepen陣營不會通過道具API鏈接

陣營不會在我的API鏈接道具傳遞到$ {} this.state.query。我究竟做錯了什麼？

class App extends React.Component {         
constructor(props) { 
super(props) 
this.state = { 
query: '' 
    } 
} 

searchFunction() { 
    fetch('http://api.openweathermap.org/data/2.5/weather?zip=${this.state.query},us&appid=748f643131acee33c207bee1a969f6e3', { 
    method: 'GET' 
}).then((res) => { 
res.json().then((data) => { 
    console.log(data); 
    }) 
}) 
    .catch((err) => { 
     console.log(err); 
    }) 
    } 

render() { 
return (
    <div> 
    <h1>Check The Weather!</h1> 
    <div> 
    <input type="text" placeholder="Enter Zipcode" value={this.state.query} onChange={event => {this.setState({query: event.target.value})}} /> 
<button type="submit" onClick={() => this.searchFunction()}>CHECK WEATHER </button> 
    </div> 
    </div> 
)} 
} 


ReactDOM.render(<App/>, document.getElementById('root'))

來源

2017-03-17 Beck Beach

FWIW，這無關與之反應本身。您沒有正確使用模板文字。 –

您使用單引號代替模板文字的反標記。

'http://api.openweathermap.org/data/2.5/weather?zip=${this.state.query},us&appid=748f643131acee33c207bee1a969f6e3'

應該是模板文字

`http://api.openweathermap.org/data/2.5/weather?zip=${this.state.query},us&appid=748f643131acee33c207bee1a969f6e3`

信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

模板文字是由背打勾（）（重音）性格封閉的雙重替代或單引號。模板文字可以包含佔位符。這些由美元符號和大括號（$ {expression}）表示。在地方持有人和他們之間的文本表達式被傳遞給一個函數。默認功能只是將各部分連接成一個字符串。如果在模板文字（此處爲標記）之前存在表達式，則模板字符串被稱爲「標記的模板文字」。在這種情況下，標籤表達式（通常是一個函數）會被處理後的模板文字調用，然後您可以在輸出之前對其進行處理。若要轉義模板文字中的反標，請在反標前加上反斜槓\。

工作筆http://codepen.io/finalfreq/pen/MpONrW

來源

2017-03-17 18:18:39 finalfreq

陣營不會通過道具API鏈接

回答

相關問題