Question

请问我的反应类有这个问题，我正在尝试更新我的状态，但我得到这个错误“无法读取属性'setState'的未定义”..我已经尝试过每一个解决方案，但没有运气

这是代码

export default class PageBackground extends Component{
    constructor(props) {
            super(props);

            this.state={
                lat         :'nothing',
                longi       :''
            };
            this.getLocation=this.getLocation.bind(this);
            }


        componentWillMount() {
            this.getLocation();
        }
        getLocation () {

            fetch('http://freegeoip.net/json/')
             .then((res)=>res.json())
             .then(function (objec){this.setState({lat:objec.latitude,longi:objec.longitude});})
             .catch((err)=>console.log("didn't connect to App",err))
             console.log(this.state.lat)
        }

        render(){
            return(
                <p>{this.state.lat}</p>
                )
            }
        }

Answer 1

function () { ... }语法不会保留上下文中的this引用。请改用箭头功能：

then(() => {
    this.setState({lat: objec.latitude, longi: objec.longitude})
})

另一种选择是在.bind(this)之后添加function () { }。

或者，只需将this保存到局部变量并在函数内使用它：

var self = this;
fetch('http://freegeoip.net/json/')
         .then((res)=>res.json())
         .then(function (objec){self.setState({lat:objec.latitude,longi:objec.longitude});})
         .catch((err)=>console.log("didn't connect to App",err))
         console.log(this.state.lat)

然而，箭头函数是针对这类问题引入的。

Answer 2

试试这个：

   getLocation () {
            var self = this;
            fetch('http://freegeoip.net/json/')
             .then(function (objec) {
               console.log(objec);
               self.setState({lat: objec.latitude, longi: objec.longitude})
             })
            .catch(function (error) {
               console.log(error);
            });
        }

Answer 3

问题在于，您尝试在不同的范围内访问this。

每当我们传递function() {}作为回调时，它就会创建自己的范围。请改用箭头功能。

() => { 'your code here'; }

箭头功能共享其父级的范围。

getLocation = () => {
    fetch('https://freegeoip.net/json/')
        .then(res => res.json())
        .then((objec) => {
            this.setState({ lat: objec.latitude, longi: objec.longitude });
        })
        .catch(err => console.log("didn't connect to App", err));
    console.log(this.state.lat);
}

'this.setState'有什么问题

3 个答案: