Question

＆＃13;

    async componentDidMount(){
        // Metrics
        await this.forumMetrics();
    }

＆＃13;

我试图从我从ajax调用中调用的API插入数据。但是，当我尝试在函数内部设置状态时，它告诉我setstate不是函数。我查了一下，很多帖子告诉我，我必须.bind(this)我做了但是它仍然给我错误。

此外，我还遇到了另一个无法从函数外部访问状态的问题，因为我需要将其插入到将数据插入到我的数据库中的服务工作者中。我可以访问函数，但不能在我需要的外部访问，以便在后端将状态绑定到我的模型。

有什么建议吗？我觉得我很近但却遗失了什么。

这是我的代码：

＆＃13;

async forumMetrics(data){
    const getuserData = () => {
        $.getJSON({
            type: 'GET',
            url: 'https://json.geoiplookup.io/api?callback=?',
            success: (data) => {
                //console.log(data);
                this.setState({
                    userIp: data.ip,
                    userCity: data.city,
                    userRegion: data.region,
                    userCountry: data.country_name,
                    userLatitude: data.latitude,
                    userLongitude: data.longitude
                })
                //console.log(this.state);
            },
        })
    }

    const result = getuserData();

    result;

    const metricData = {
        userIp: this.state.userIp,
        userCity: this.state.userCity,
        userCountry: this.state.userCountry,
        userRegion: this.state.userRegion,
        userLatitude: this.state.userLatitude,
        userLongitude: this.state.userLongitude,
        vieweddateTime: Moment().format('YYYY-MM-DD hh:mm:ss'),
        createdDate: Moment().format('YYYY-MM-DD hh:mm:ss'),
        year: Moment().format('YYYY'),
        month: Moment().format('MM')
    }

    const metricForum = await MetricService.insertpageView(metricData);

}

＆＃13;

Answer 1

你真的不应该使用jQuery来检索数据。使用fetch()或axios或类似内容。

话虽如此，您的问题可以通过使用箭头功能来解决。请尝试以下方法，而不是function getuserData...：

    const getuserData = (result) => {
        $.getJSON({
            type: 'GET',
            url: 'https://json.geoiplookup.io/api?callback=?',
            success: (data) => {
                console.log(data);
                // I have access to data in this function
                this.setState({
                    userIp: data.ip
                })
            },
        })
    }

请注意，箭头函数中的this绑定到父函数的this。

另外，请记住在组件构造函数上绑定forumMetrics函数。

编辑：

我没有看到你在任何地方呼叫getuserData() ......

编辑2：

你可能想让getUserData成为一个单独的函数：

async forumMetrics(data){
    const data = await this.getuserData();
    console.log(data);

    this.setState({
                userIp: data.ip,
                userCity: data.city,
                userRegion: data.region,
                userCountry: data.country_name,
                userLatitude: data.latitude,
                userLongitude: data.longitude
    });
}

getUserData(data) {
  return new Promise((accept, reject) => {
    $.getJSON({
      type: 'GET',
      url: 'https://json.geoiplookup.io/api?callback=?',
      success: accept,
    }) 
  });
}

请注意await函数中的async关键字将等待承诺完成并使用接受的值继续运行。

只需使用getUserData

即可简化fetch功能

getUserData() {
  return fetch('https://json.geoiplookup.io/api?callback=?');
}

Answer 2

forumMetrics（）调用

您的forumMetrics功能未受约束，因此this很可能未定义。您可以在构造函数

中绑定它

constructor() {
  this.forumMetrics = this.forumMetrics.bind(this);
}

或声明如下：

forumMetrics = async () => {
}

后者是实验语法。

setState（）调用

如果你选择第一个选项，在回调中，你的this肯定没有指向这个类。如果您要使用jQuery进行ajax提取，那么在self变量中捕获引用（这是一种不好的做法，但在React上使用jQuery也是如此）：

async forumMetrics(){
    const self = this;

    function getuserData(result) {
       ...
       self.setState({ ...stuff here... })

从ajax调用设置状态到插入到db外部函数？

2 个答案:

forumMetrics（）调用

setState（）调用