即使将此绑定到构造函数中,也无法定义它

时间:2019-07-09 19:26:25

标签: javascript reactjs

它是我的组成部分:

sys.path.append

当我路由到该组件时,控制台显示:

export default class loading extends Component {

    constructor(props) {
      super(props);

      /* Binding this to CallHomeApiRequest */
      this.CallHomeApiRequest = this.CallHomeApiRequest.bind(this);
    }

    /* This function requests my backend with given data to get list of places json, and pass it to another component */
    CallHomeApiRequest(data) {
      let data_to_pass_to_backend = JSON.parse(localStorage.getItem('DataSetInHome'));
      let url = "http://127.0.0.1:8000/api/home"
      console.log(data_to_pass_to_backend)
      axios({
        method: 'post',
        url: url,
        data: data_to_pass_to_backend,
        headers: {
          "content-type": "application/json"
        }
      }).then(function (response) {

        let data = response.data.data[0].json_data;
        console.log(data)
        /* Sending got data to localStorage as JSON string */
        localStorage.setItem('PlacesList', JSON.stringify(data));
        console.log("This: "+this)
        /* Changing component to placesList */
        this.props.history.push('/placesList') //this shows "cannot read propety props"

      }).catch(function (error) {
        console.log(error)
      });

    }

    render() {
      return (
        <div className="loading_component_container">

          { this.CallHomeApiRequest() }

          <LoadingScreen
              loading={true}
              bgColor='#fff'
              spinnerColor='#9ee5f8'
              textColor='#000'
              //logoSrc='/logo.png'
              text='Loading places...'
          />

        </div>
      );
    }
  }

我看到了这个question,但是我以正确的方式(This: undefined loading.js:43 TypeError: Cannot read property 'props' of undefined at loading.js:40 )绑定了我的函数。

我很确定,我遗漏了一些明显的东西,因此我无法开箱即用。

我的目标是只调用this.functionname = this.functionname.bind(this),所以也许我可以将this.props.history.push('/placesList')主体移到构造函数中,但是也许以后,我或其他人也会遇到类似的问题。

0 个答案:

没有答案