axios无法解析状态元素的反应

Question

我很反应并遵循教程.教师正在使用axios从github api中提取一些数据.以下是他建议的onSubmit事件处理程序:

handleSubmit = (event) => {
    event.preventDefault();
  console.log('event: form submit ' + this.state.userName )
  axios.get('https://api.github.com/users/${this.state.userName}')
    .then(resp => {
        console.log(resp)
    });

}

但是,当我运行它时,this.state.userName没有得到解决,我收到404.代码是否有问题或axios更新？我正在使用jscomplete/repl playground来处理它.

帮助赞赏!

以下是组件代码:

class Form extends React.Component {

    state = {
userName: '  ',
event: ' '
}

handleSubmit = (event) => {
    event.preventDefault();
  console.log('event: form submit ' + this.state.userName )
  axios.get('https://api.github.com/users/${this.state.userName}')
    .then(resp => {
        this.setState({event: resp})
    });
  console.log(event)
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text"
                    value={this.state.userName}
        onChange={(event) => this.setState({userName: event.target.value})}
                    placeholder={ this.state.username } required 
      />
      <button>Add Card</button>
    </form>
  )
}
}

Answer 1

你没有像你应该那样使用ES6模板文字.
在这一行中你用以下内容包装了字符串':
'https://api.github.com/users/${this.state.userName}'

用back-ticks(`)包裹它(用波浪号按钮)