通过react-modal提交表单时，无法读取未定义的属性“”setState“”

Question

我觉得我错过了一些东西，可能很愚蠢。我有一个模式表单弹出，如果用户想要改变他们的头像照片。而函数正在运行并更新我的数据库，当我改变状态时，它就会变得一团糟…下面是处理模式提交的函数：

  onModalSubmit: function () {
    let data = new FormData();

    data.append('id', this.state.user._id)
    data.append('image', this.refs.image.files[0])

    axios.patch('/api/userphoto', data, {
      'Content-Type': 'multipart/form-data'
    }).then(function (response) {

      console.log(response);

      window.localStorage.setItem('user', JSON.stringify(response.data.user));

      this.setState({ user: response.data.user, modalIsOpen: false });

    }).catch(function (error) {

      console.log(error);

    })

  }

下面是模型：

  <Modal
    isOpen={this.state.modalIsOpen}
    onAfterOpen={this.afterOpenModal}
    onRequestClose={this.closeModal}
    style={customStyles}
    contentLabel="Change Photo"
  >

    <h2>Change Photo</h2>
    <div className="field">
      <div className="ui center icon input">
        <input type="file" name="image" ref="image"/>
        <button className="ui button" onClick={this.closeModal}>Cancel</button>
        <button className="ui button" onClick={this.onModalSubmit}>Submit</button>
      </div>
    </div>

  </Modal>

我已经尝试过内联绑定这个函数，也尝试过在构造函数中绑定...但它只是告诉我另一个错误，它已经绑定到组件。

同样，该函数正在工作，只是在收到服务器的响应后挂起了this.setState。

感谢您的帮助，谢谢！

Answer 1

我试过内联绑定这个函数，也试过在构造函数中绑定...但它只是告诉我另一个错误，它已经绑定到组件。

您正在使用React.CreateClass工厂的语法。我从你之前的帖子中知道了这一点。

在这里你不需要绑定方法。它们已经被绑定了。

请查看here提供的完整答案。

​

​