Question

如何将response.status中的$.get()保存到React变量this.posts中？

当我尝试从this.posts内访问$.get()时，会返回undefined。

import React, { Component } from 'react';
import $ from 'jquery';

class MediumPosts extends Component {

  constructor(props) {
    super(props);
    this.posts = [];
  }

  fetchPosts = () => {
    var data = {
      rss_url: 'https://medium.com/feed/tradecraft-traction'
    };
    $.get('https://api.rss2json.com/v1/api.json', data, (response) => {
      if (response.status == 'ok') {
        console.log(response.items);
        this.posts = response.items; // Undefined
      }
    });
  }

  componentDidMount() {
    this.fetchPosts();
  }

  render() {
    return (
      <ul>
        {this.posts.map(function(item, i) {
          return (
            <li key={item.guid}>
              <h4>{item.title}</h4>
              <time>{item.pubDate}</time>
            </li>
          )
        })}
      </ul>
    )
  }
}

export default MediumPosts;

Answer 1

基本上，你应该保持你的posts状态。

当值在state（如果它不是来自父组件）的时间内发生变化时，您只需要更新它。

ReactJS docs reference

因此，您的代码将如下所示：

class MediumPosts extends Component {

  constructor(props) {
    super(props);

    // init state
    this.state = {
        posts: [],
    }
  }

  fetchPosts = () => {
    // because you are pass arrow function in the callback we have to save `this`.
    // or you can create callback function in the component and pass it
    const self = this;
    const data = {
      rss_url: 'https://medium.com/feed/tradecraft-traction'
    };

    $.get('https://api.rss2json.com/v1/api.json', data, response => {
      if (response.status == 'ok') {
        self.setState({posts: response.items});
      }
    });
  }

  componentDidMount() {
    this.fetchPosts();
  }

  render() {
    return (
      <ul>
        {this.state.posts.map(function(item, i) {
          return (
            <li key={item.guid}>
              <h4>{item.title}</h4>
              <time>{item.pubDate}</time>
            </li>
          )
        })}
      </ul>
    )
  }
}

export default MediumPosts;

无论如何，我建议你在ReactJS项目中摆脱jQuery。相反，请使用axios。

希望它会有所帮助。

Answer 2

您可以使用jQuery.proxy()来使用特定的上下文。

$.get('https://api.rss2json.com/v1/api.json', data, $.proxy(function(response) {
    if (response.status == 'ok') {
        console.log(response.items);
        this.posts = response.items; // Undefined
    }
}, this));

Answer 3

你可以试试这个

  fetchPosts = () => {
    var self=this;
        var data = {
          rss_url: 'https://medium.com/feed/tradecraft-traction'
        };
        $.get('https://api.rss2json.com/v1/api.json', data, (response) => {
          if (response.status == 'ok') {
            console.log(response.items);
            self.setState({posts:response.items});
          }
        });
      }

Answer 4

你应该尝试回调 -

var callback = function(value)
{
this.posts = value;  //check here weather this is accessible or not otherwise use var self = this
} 

 $.get('https://api.rss2json.com/v1/api.json', data, (response,callback) => {
      if (response.status == 'ok') {
        console.log(response.items);
        this.posts = response.items; // Undefined
    callback(response.items);
      }
    });

如何保存jQuery获取对React变量的响应？

4 个答案: