继续得到这个错误,而试图写一个应用程序与第三方API工作

TypeError:这个。setState不是一个函数

当我试图处理API响应时。我怀疑这个装订有问题,但我不知道怎么修。这是我的组件的代码:

var AppMain = React.createClass({
    getInitialState: function() {
        return{
            FirstName: " "
        };
    },
    componentDidMount:function(){
        VK.init(function(){
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},function(data){
                if(data.response){
                    this.setState({ //the error happens here
                        FirstName: data.response[0].first_name
                    });
                    console.info(this.state.FirstName);
                }

            });
        }, function(){
        console.info("API initialisation failed");

        }, '5.34');
    },
    render:function(){
        return (
            <div className="appMain">
            <Header  />
            </div>
        );
    }
});

当前回答

我有同样的误差

setState不是一个函数

但是这个理由是愚蠢的。把它作为回应发布在这里,希望能拯救那些可能犯同样错误的人。

而不是

  const { state, setState } = React.useState(false);

Use

  const [ state, setState ] = React.useState(false);

方括号而不是花括号!

其他回答

这主要是反应体、反应体和酶之间的不相容问题。

尝试像我那样安装以下程序来解决问题:

[...]
    "react": "^18.0.0-beta-f320ef88f-20211116",
    "react-dom": "16.14.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6"
[...]

React建议在所有需要使用this类的方法中绑定this,而不是self函数的this。

constructor(props) {
    super(props)
    this.onClick = this.onClick.bind(this)
}

 onClick () {
     this.setState({...})
 }

或者你可以用箭头函数代替。

现在ES6有箭头函数,它真的很有用,如果你真的混淆了bind(这个)表达式,你可以试试箭头函数

我就是这么做的。

componentWillMount() {
        ListApi.getList()
            .then(JsonList => this.setState({ List: JsonList }));
    }

 //Above method equalent to this...
     componentWillMount() {
         ListApi.getList()
             .then(function (JsonList) {
                 this.setState({ List: JsonList });
             }.bind(this));
 }

如果你这样做仍然有问题,我的问题是我调用了两个相同的变量名。

我把公司作为一个对象从Firebase引入,然后试着调用这个。setState({companies: companies})——由于显而易见的原因,它没有工作。

如果您使用箭头函数,则不需要将此分配给局部变量。箭头函数自动接受绑定,您可以避开范围相关的问题。

下面的代码解释了如何在不同的场景中使用箭头函数

componentDidMount = () => {

    VK.init(() => {
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},(data) => {
            if(data.response){
                that.setState({ //this available here and you can do setState
                    FirstName: data.response[0].first_name
                });
                console.info(that.state.FirstName);
            }
        });
    }, () => {
        console.info("API initialisation failed");

    }, '5.34');
 },