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

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

React Native referenced object seems to be undefined

问题

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

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

	constructor(props){
    super(props);
    this.state={
      data : [],
      }
    }
async  componentDidMount(){
	try {
    const id = this.props.navigation.state.params.info

    const res = await axios.request({
      method: 'get',
      url: `https://developers.zomato.com/api/v2.1/restaurant?res_id=${id}`,
      headers: {
        'Content-Type': 'application/json',
        'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
      }
    });
    this.setState({ data: res.data });
  } catch (err) {
    console.log(err);
  } finally {
    this.setState({ isLoading: false });
  }
  };

  render() {
    return (
    <View>        
    	{this.state.isLoading ?
            <View style={{ flex: 1, marginTop: 200 }}>
              <ActivityIndicator style={{color:'red'}} />
            </View> :
            
    	<View><Text>{this.state.data.name}</Text></View>
    	}
    </View>
)}
英文:

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

	constructor(props){
    super(props);
    this.state={
      data : [],
      }
    }
async  componentDidMount(){
	try {
    const id = this.props.navigation.state.params.info

    const res = await axios.request({
      method: &#39;get&#39;,
      url: `https://developers.zomato.com/api/v2.1/restaurant?res_id=${id}`,
      headers: {
        &#39;Content-Type&#39;: &#39;application/json&#39;,
        &#39;user-key&#39;: &#39;a31bd76da32396a27b6906bf0ca707a2&#39;
      }
    });
    this.setState({ data: res.data });
  } catch (err) {
    console.log(err);
  } finally {
    this.setState({ isLoading: false });
  }
  };

  render() {
    return (
    &lt;View&gt;        
    	{this.state.isLoading ?
            &lt;View style={{ flex: 1, marginTop: 200 }}&gt;
              &lt;ActivityIndicator style={{color:&#39;red&#39;}} /&gt;
            &lt;/View&gt; :
            
    	&lt;View&gt;&lt;Text&gt;{this.data.name}&lt;/Text&gt;&lt;/View&gt;
    	}
    &lt;/View&gt;
)}

答案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 ,

&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
匿名

发表评论

匿名网友

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

确定