React-Native TypeError:未定义不是对象(计算this.state.signatures.length)

Question

我是react-native的新手，我一直在尝试从API获取数据，然后在视图中显示它们。这是我的代码

FetchSignatures.js：

    const URL = 'http://localhost:8000';

    export default {
     async fetchSignatures() {
       try{
           let response = await fetch(URL+'/api/signatures');
           let responseJsonData = await response.json();
           return responseJsonData;
       }
       catch(e){
         console.log(e)
       }
     }
    }

Signatures.js：

    import React, { Component } from 'react';
    import { View, Text, StyleSheet  } from 'react-native';
    import ajax from '../services/FetchSignatures';
    import SignaturesList from '../components/SignaturesList';

    export class Signatures extends Component {
      state = {
        signatures: []
      }

      async componentDidMount() {
        const signatures = await ajax.fetchSignatures();
        this.setState({signatures});
      }
      render() {
        return (
        <View>
        {
          this.state.signatures.length > 0 ? <SignaturesList signatures= 
          {this.state.signatures}/> : <Text>No Guest</Text>
        }
        </View> 
        )
      }
    }

    export default Signatures;

它总是返回一个错误，说"TypeError:未定义不是一个对象(计算'this.state.signatures.length')。

这是我的API的截图：

​

​

请谁来帮我解决这个问题..提前道谢..

Answer 1

在渲染this.state.signatures.length时，签名不会被创建为一种状态，因为从API获取数据需要一些时间。这就是你得到未定义错误的原因。所以，只要创建一个条件渲染即可。

试试下面的代码。

render() {
        if(this.state.signatures){
          return(
            this.state.signatures.length > 0 ? <SignaturesList signatures= 
            {this.state.signatures}/> : <Text>No Guest</Text>

          );
        }
  }