Question

http://codepen.io/beckbeach/pen/mWqrep我的代码

React不会在我的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'))

Answer 1

您使用单引号代替模板文字的后退标记。

top

应该是

'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

模板文字由反向标记（`http://api.openweathermap.org/data/2.5/weather?zip=${this.state.query},us&appid=748f643131acee33c207bee1a969f6e3`）（严重重音）括起来字符而不是双引号或单引号。模板文字可以包含占位符。这些由美元符号表示花括号（$ {expression}）。地方持有人和表达者的表达它们之间的文本传递给一个函数。默认功能只需将部分连接成一个字符串即可。如果有的话在模板文字（此处为标记）之前的表达式，模板 string被称为“标记模板文字”。在那种情况下，标签使用已处理的表达式调用表达式（通常是函数）模板文字，然后您可以在输出之前进行操作。至在模板文字中转义后退，在前面加一个反斜杠\ 背蜱。

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

React不会将道具传递给API链接

1 个答案: