Javascript axios无法解析状态元素

我是一个新的反应和以下教程。讲师正在使用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 playway来处理它

谢谢你的帮助

以下是组件代码：

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>
  )
}
}

类表单扩展了React.Component{
状态={
用户名：“”，
事件：“”
}
handleSubmit=（事件）=>{
event.preventDefault（）；
console.log（'事件：表单提交'+this.state.userName）
axios.get（）https://api.github.com/users/${this.state.userName}'）
。然后（resp=>{
this.setState（{event:resp}）
});
console.log（事件）
}
render（）{
返回(
this.setState（{userName:event.target.value}）
占位符={this.state.username}必需
/>
添加卡
)
}
}

您没有使用您应该使用的功能。
在这一行中，您使用

“

：

'https://api.github.com/users/${this.state.userName}'

---

用倒钩（`）（用波浪形按钮）将其包装起来。

您确实应该使用构造函数初始化状态变量。使用倒勾（`）替换字符串中的变量。还将函数绑定到类以使用

此

上下文。尝试以下代码

class Form extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            userName: '  ',
            event: ' '
        }

        this.handleSubmit = this.handleSubmit.bind(this)
    }

    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>
        )
    }
}

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
用户名：“”，
事件：“”
}
this.handleSubmit=this.handleSubmit.bind（this）
}
handleSubmit=（事件）=>{
event.preventDefault（）；
console.log（'事件：表单提交'+this.state.userName）
axios.get(`https://api.github.com/users/${this.state.userName}`）
。然后（resp=>{
this.setState（{event:resp}）
});
console.log（事件）
}
render（）{
返回(
this.setState（{userName:event.target.value}）
占位符={this.state.username}必需
/>
添加卡
)
}
}

仅供参考，我收到了：GET 404（未找到）您能告诉我您是如何调用它的吗？可能是完整的组件代码好的，我将编辑问题，然后肯定this.state.userName将是未定义的！在你的旁边是缺少的`（backtick）嗯……那是我@Sag1v的一个非常蹩脚的错误。。。救命啊，巴德！有趣的是，我在解析的url中得到垃圾：。。我无法理解这个%20%20！这是因为“this”的使用错误吗？它是一个url编码的值

%20

是一个

空格

，看起来你的值中有两倍的空格。尝试修剪这个vlue，您将得到我假设的结果，在ES6语法中，您可以直接使用状态变量，而不是声明构造函数。。。当然我会试试。你可以，但是

bind

函数在

constructor

或

componentDidMount

中有真正的位置。我倾向于在构造函数中绑定它们如果它们很少，我在解析的url中得到垃圾：api.github.com/users/%20%20ovk23。。我无法理解这个%20%20！这是因为错误地使用了“this”？%20%20是空间。因为您有

this.state.username='

。注意空格。最后试着放一些有效的值。。。谢谢普里耶什·库马尔！它最终成功了。。。1/2小时的头痛消失了……）