React Native 函数引用错误
React Native Function ReferenceError
这里是 React Native 的新手...我正在尝试调用一个函数,该函数在 render() 方法中的组件内执行获取请求。
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class Home extends React.Component {
static navigationOptions = {
title: 'Details',
};
getMoviesFromApiAsync = () => {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
};
render() {
return (
<React.Fragment>
<Text>{getMoviesFromApiAsync()}</Text>
</React.Fragment>
);
}
}
但是,我收到 ReferenceError:找不到变量 getMoviesFromApiAsync()。这是为什么?
Error Image
您需要在 class 上调用该方法,这是基本的 Vanilla Javascript 事情。
<Text>{this.getMoviesFromApiAsync()}</Text>
但是,你这里的方法不好,你应该把组件写出来,把你的api请求的结果存储在组件状态中。这样你就不需要在每个渲染周期都发出请求!
export default class Home extends React.Component {
static navigationOptions = {
title: 'Details',
};
state = {
movies: []
}
componentDidMount() {
this.getMoviesFromApiAsync()
}
getMoviesFromApiAsync = () => {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
movies: [...this.state.movies, ...responseJson.movies]
})
})
.catch((error) => {
console.error(error);
});
};
render() {
const { movies } = this.state
return (
<React.Fragment>
{ movies.map( (movie, i) => <Text>{movie.title}</Text> ) }
</React.Fragment>
);
}
}
这里是 React Native 的新手...我正在尝试调用一个函数,该函数在 render() 方法中的组件内执行获取请求。
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class Home extends React.Component {
static navigationOptions = {
title: 'Details',
};
getMoviesFromApiAsync = () => {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
};
render() {
return (
<React.Fragment>
<Text>{getMoviesFromApiAsync()}</Text>
</React.Fragment>
);
}
}
但是,我收到 ReferenceError:找不到变量 getMoviesFromApiAsync()。这是为什么?
Error Image
您需要在 class 上调用该方法,这是基本的 Vanilla Javascript 事情。
<Text>{this.getMoviesFromApiAsync()}</Text>
但是,你这里的方法不好,你应该把组件写出来,把你的api请求的结果存储在组件状态中。这样你就不需要在每个渲染周期都发出请求!
export default class Home extends React.Component {
static navigationOptions = {
title: 'Details',
};
state = {
movies: []
}
componentDidMount() {
this.getMoviesFromApiAsync()
}
getMoviesFromApiAsync = () => {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
movies: [...this.state.movies, ...responseJson.movies]
})
})
.catch((error) => {
console.error(error);
});
};
render() {
const { movies } = this.state
return (
<React.Fragment>
{ movies.map( (movie, i) => <Text>{movie.title}</Text> ) }
</React.Fragment>
);
}
}