Question

这是我的组件，剥去了所有漂亮的东西：

const MyOtherComp = ({message}) => {
    return (
      <div className="message">{message}</button>
    )
}

class MyComp extends React.Component {
  constructor (props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  state = {
    fileUploadMessage: "",
  }

  handleSubmit (e) {
    e.preventDefault()
    axios.post('post-url',
      formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(function (response) {
        console.log(this)
        this.setState({fileUploadMessage: response})
      })
      .catch(function (error) {
        console.log(error.response)
      })
  }

  render () {
    return (
      <form onSubmit={this.handleSubmit}>
                      <button type='submit'>Submit</button>
                      <MyOtherComp message={this.state.fileUploadMessage} />
      </form>
    )
  }
}

export default MyComp

如您所见，我已将上部组件this的{{1}}对象绑定到MyComp处理程序的this对象。

我期望：返回handleSubmit时，axios的{{1}}对象应包含一个名为this的方法，因为handleSubmit组件具有它（就像所有React类组件一样）。因此-setState范围内的MyComp应该与this范围相同。实际发生的情况：当我检查axios对象（请参阅handleSubmit子句中的this）时，它就是console.log。

我缺少明显的东西吗？

Answer 1

您正在.then内创建一个新函数，该函数将创建this的新范围。将其更改为箭头功能，它应该可以工作-

.then((response) => {
    console.log(this)
    this.setState({fileUploadMessage: response})
 })

如果您不想使用箭头功能，那么

.then(function (response) {
   console.log(this)
   this.setState({fileUploadMessage: response})
}.bind(this))

将setState传递给处理程序函数内部的axios（反应）

1 个答案: