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 Template literals 在这一行中，你用'包裹了字符串：
'https://api.github.com/users/${this.state.userName}'

用back-ticks（`）（用波浪号按钮）

包裹它

Answer 2

你真的应该使用构造函数来初始化状态变量。使用反引号（`）替换string中的变量。还要将函数绑定到类以使用this上下文。请尝试以下代码

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

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

2 个答案: