React Native引用的对象似乎未定义。

huangapple
go评论109阅读模式
英文:

React Native referenced object seems to be undefined

问题

我正试图将从API检索到的数据分配到一个数组中，但是每当调用数据时，我的项目就会崩溃，我会收到一个错误，错误信息是TypeError: undefined is not an object (evaluating 'this.data.name')

以下是关于变量data的所有代码：

  1. 	constructor(props){
  2.     super(props);
  3.     this.state={
  4.       data : [],
  5.       }
  6.     }
  7. async  componentDidMount(){
  8. 	try {
  9.     const id = this.props.navigation.state.params.info
  11.     const res = await axios.request({
  12.       method: 'get',
  13.       url: `https://developers.zomato.com/api/v2.1/restaurant?res_id=${id}`,
  14.       headers: {
  15.         'Content-Type': 'application/json',
  16.         'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
  17.       }
  18.     });
  19.     this.setState({ data: res.data });
  20.   } catch (err) {
  21.     console.log(err);
  22.   } finally {
  23.     this.setState({ isLoading: false });
  24.   }
  25.   };
  27.   render() {
  28.     return (
  29.     <View>        
  30.     	{this.state.isLoading ?
  31.             <View style={{ flex: 1, marginTop: 200 }}>
  32.               <ActivityIndicator style={{color:'red'}} />
  33.             </View> :
  34.             
  35.     	<View><Text>{this.state.data.name}</Text></View>
  36.     	}
  37.     </View>
  38. )}
英文:

I am trying to assign data retrieved from an API into an array, however whenever the data is called my project crashed and I get an error saying TypeError: undefined is not an object (evaluating &#39;this.data.name&#39;)

Here is all my code regarding the variable data

  1. 	constructor(props){
  2.     super(props);
  3.     this.state={
  4.       data : [],
  5.       }
  6.     }
  7. async  componentDidMount(){
  8. 	try {
  9.     const id = this.props.navigation.state.params.info
  11.     const res = await axios.request({
  12.       method: &#39;get&#39;,
  13.       url: `https://developers.zomato.com/api/v2.1/restaurant?res_id=${id}`,
  14.       headers: {
  15.         &#39;Content-Type&#39;: &#39;application/json&#39;,
  16.         &#39;user-key&#39;: &#39;a31bd76da32396a27b6906bf0ca707a2&#39;
  17.       }
  18.     });
  19.     this.setState({ data: res.data });
  20.   } catch (err) {
  21.     console.log(err);
  22.   } finally {
  23.     this.setState({ isLoading: false });
  24.   }
  25.   };
  27.   render() {
  28.     return (
  29.     &lt;View&gt;        
  30.     	{this.state.isLoading ?
  31.             &lt;View style={{ flex: 1, marginTop: 200 }}&gt;
  32.               &lt;ActivityIndicator style={{color:&#39;red&#39;}} /&gt;
  33.             &lt;/View&gt; :
  34.             
  35.     	&lt;View&gt;&lt;Text&gt;{this.data.name}&lt;/Text&gt;&lt;/View&gt;
  36.     	}
  37.     &lt;/View&gt;
  38. )}

答案1

得分: 1

基本上问题在于你在状态中存储了数值，但在引用该数值时没有提供状态，所以只需这样做，

  1. <View><Text>{this.state.data.name}</Text></View>

希望能有所帮助。有疑问请随时提问。

英文:

Basically the problem is you are storing in the state, but while referring the value you are not providing state, so just do ,

  1. &lt;View&gt;&lt;Text&gt;{this.state.data.name}&lt;/Text&gt;&lt;/View&gt;

Hope it helps. Feel free for doubts.

huangapple
  • 本文由 发表于 2020年1月4日 12:49:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/59587984.html
  • expo
  • react-native
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定