如何将jQuery $.get的response.status存入React变量this.posts？

你遇到的问题其实是JavaScript上下文绑定导致的——在jQuery的AJAX回调里，如果处理不当，this的指向会发生变化，不再指向你的React组件实例，所以直接访问this.posts才会返回undefined。下面给你几种靠谱的解决办法：

方法一：用箭头函数锁定上下文 #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的组件实例）。你已经在fetchPosts里用了箭头函数，只要回调也保持箭头函数的形式，就能正常访问this.posts：

fetchPosts = () => {
  var data = { rss_url: 'https://medium.com/feed/tradecraft-traction' };
  $.get('https://api.rss2json.com/v1/api.json', data, (response) => {
    // 这里的this就是组件实例，放心赋值
    this.posts = response.status;
    // 注意：直接赋值this.posts不会触发组件重新渲染，如果需要页面更新，建议用下面的state方案
  });
}

方法二：提前保存组件的this到变量 #

如果你习惯用普通函数作为回调，可以在回调外面先把组件的this存到一个变量（比如that）里，之后用这个变量访问组件实例：

fetchPosts = () => {
  var data = { rss_url: 'https://medium.com/feed/tradecraft-traction' };
  const that = this; // 把组件的this存下来
  $.get('https://api.rss2json.com/v1/api.json', data, function(response) {
    // 用that代替this，就能访问到组件的posts属性了
    that.posts = response.status;
  });
}

更推荐的做法：用React State管理数据 #

上面两种方法能解决赋值问题，但直接修改this.posts不会触发组件重新渲染，页面不会同步更新。React推荐用state来管理组件内部的可变数据，这样数据变化时页面会自动刷新：

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

class MediumPosts extends Component {
  constructor(props) {
    super(props);
    // 把posts放到state里初始化
    this.state = {
      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') {
        // 用setState更新数据，触发组件重新渲染
        this.setState({ posts: response.items });
      } else {
        console.error('请求失败:', response.message);
      }
    });
  }

  // 组件挂载完成后发起请求
  componentDidMount() {
    this.fetchPosts();
  }

  render() {
    // 从state里取数据渲染页面
    return (
      <div className="medium-posts">
        {this.state.posts.map(post => (
          <article key={post.guid} className="post-item">
            <h2>{post.title}</h2>
            <p dangerouslySetInnerHTML={{ __html: post.description }} />
          </article>
        ))}
      </div>
    );
  }
}

export default MediumPosts;

这样一来，当接口返回数据后，setState会更新组件状态，页面自动重新渲染展示最新的内容。

内容的提问来源于stack exchange，提问作者Giovanni