Question

为什么代码段的输出在“ true”之下？

class InstagramGallery extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            images: true
        };
    }

    componentDidMount() {
        var accessToken = '*Instagram token*';
        var instagramApi = new Instagram(accessToken);
        instagramApi.userSelfMedia().then(function(result) {
            this.setState({
                images: false,
            });
        }, function(err) {
            console.log(err);
        });

    }

    render() {
        console.log(this.state.images); 
        return (
            <div className="instagram-gallery">

            </div>
        )
    }
}

据我所知，构造函数首先被调用。因此，images=true之后会用console.log(true)进行渲染，然后调用componentDidMount。从instagram中获取数据后，我更新了组件状态，应使用images=false重新呈现组件。我在哪里错了？

Answer 1

您正在对instagramAp.userSelfMedia回调使用常规函数，因此会丢失this上下文。改用箭头功能：

instagramApi.userSelfMedia().then(
  result => {
    this.setState({
      images: false
    });
  },
  function(err) {
    console.log(err);
  }
);

常规函数创建自己的词法作用域，因此this不会将类指向回调函数。箭头函数不会创建自己的词法作用域，this指向您的组件，您可以使用this.setState()。

使用箭头函数可避免绑定函数或将this保留在另一个变量中，例如：

var accessToken = "*Instagram token*";
var instagramApi = new Instagram(accessToken);
const that = this;
instagramApi.userSelfMedia().then(
  function(result) {
    that.setState({
      images: false
    });
  },
  function(err) {
    console.log(err);
  }
);

Answer 2

我已经很久没有使用RN了，但这有影响吗？

componentDidMount() {
    var accessToken = '*Instagram token*';
    var instagramApi = new Instagram(accessToken);
    instagramApi.userSelfMedia().then((result) => { //USING ARROW FUNCTION
        this.setState({
            images: false,
        });
    }, function(err) {
        console.log(err);
    });

}

我添加了一个箭头函数，以防止instagramApi.userSelfMedia（）中的'this.state'与'this'混淆。

Answer 3

因为此功能不可用

使用箭头功能

 instagramApi.userSelfMedia().then((result) => {
        this.setState({
            images: false,
        });
    }, function(err) {
        console.log(err);
    });

  }

或手动绑定

  instagramApi.userSelfMedia().then(function(result) {
        this.setState({
            images: false,
        });
    }.bind(this), function(err) {
        console.log(err);
    });

  }

反应-未设置组件状态

3 个答案: