React-Native TypeError: Undefined не является объектом (оценивает this.state.signatures.length)

Question

Я новичок в реагирующем родстве. Я пытался получить данные из 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;

Всегда возвращается ошибка с сообщением "Ошибка типа: Не определено необъект (оценивая 'this.state.signatures.length').

это снимок экрана моего API:

Пожалуйста, кто-нибудьПомогите мне решить эту проблему .. Спасибо заранее ..

Answer 1

эта тема уже закрыта.Я не знаю, как мой реактивный натив не может получить данные API с моего локального хоста.Мой код работает нормально, когда я внедряю свой API в свой vps.

Answer 2

Когда вы визуализируете 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>

          );
        }
  }