Как записать условный рендеринг с map () на массиве, если в массиве нет значений?

Question

Экран, который я пытаюсь кодировать, имеет условный рендеринг, который показывает, присутствуют ли какие-либо события или нет. Если в массиве есть события, он должен проходить через map () и отображать все из них в виде списков.

Но когда в массиве нет значений, map () все еще выполняется, и я получаю сообщение об ошибке «Ошибка типа: Невозможно прочитать свойство« карта »с нулевым значением».

Я ничего не мог поделать, потому что я новичок в React и React Native!

class Home extends Component{

  constructor(props) {
    super(props);

    this.state = {
      events: []
    }
  }

  componentDidMount(){
    this.getDataFromStorage('Oh123456');
  }

  async getDataFromStorage(key){
    await AsyncStorage.getItem(key).then((res) => {
      res = JSON.parse(res);
      this.setState({ events: res });
    });
  }

  render() {
    const noEventsFound = (
      <View>
        <Heading>
          <H1>No Events Found!</H1>
        </Heading>
      </View>
    );


    const loadAllEventsNow = this.state.events.map((event) => (
      <OhList eventName={event.name} />
    ));

    return (
      <ImageBackground source={backgroundImage} style={styles.backgroundImage}>
        <View style={styles.container}>
          { !this.state.events ? noEventsFound : loadAllEventsNow }
        </View>
        <View>
          <OhButton color="#7BE78A" onPress={() => this.props.navigation.navigate('Register')}>CREATE AN EVENT</OhButton>
        </View>
      </ImageBackground>
    );
  }
}

Я ожидаю, что на экране будет отображаться «События не найдены» на экране, когда в массиве нет событий и если есть какие-либо события, то список событий.

Answer 1

Предполагая, что this.state.events является массивом, который вы можете заменить

<View style={styles.container}>
      { !this.state.events ? noEventsFound : loadAllEventsNow } 
</View>

с этим :

<View style={styles.container}>
      { Array.isArray(this.state.events) && this.state.events.length < 1 ? noEventsFound : loadAllEventsNow } 
</View>

Answer 2

Проблема возникает потому, что когда вы получаете данные из AsyncStorage, а ключ не существует, вы получаете нулевой ответ. Затем вы обновляете состояние, чтобы в качестве ваших событий было установлено значение NULL. Поэтому, когда вы вызываете map на вашем this.state.events, его значение равно нулю, поэтому оно не работает и выдает ошибки.

Вы должны проверить, что значение res не равно нулю, прежде чем устанавливать его в состояние.

getDataFromStorage(key){
  AsyncStorage.getItem(key).then((res) => {
    if (res) {
      let events = JSON.parse(res);
      if (Array.isArray(events)) this.setState({ events: events });
    }
  });
}

Похоже, вы путаетесь между async/await и .then/.catch. Вы используете один или другой, а не оба. Эта статья дает хорошее объяснение того, как использовать.

https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8