React Native - Почему мои условные заявления If / If никогда не проходят?

Question

Я новичок в React Native и Javascript, но я не могу найти в Интернете ничего, что могло бы помочь мне с этой проблемой, с которой я столкнулся.

Мои функции «macSong» работают, если операторы никогда не проходят, и я не уверен, почему, я чувствую, что логика c, стоящая за кодом, - это звук, но моя консоль все еще выдает «Выбранный элемент неизвестен» потому что все операторы if else «не верны», когда хотя бы один из них должен быть истинным, если выпадающее меню использовалось до нажатия кнопки. Моя функция macSong находится чуть выше моей таблицы стилей, внизу моего кода.

Если кто-то может мне помочь, это было бы замечательно, заранее спасибо и обязательно дайте мне знать, если вам нужна дополнительная информация для помогу ответить на мой вопрос!

import React, { Component, Fragment } from 'react';
import { StyleSheet, Text, TextInput, View, Button, Alert } from 'react-native';
import SearchableDropdown from 'react-native-searchable-dropdown';

var items =[
    {
      id: 1,
      name: 'Happy Music'
    },
    {
      id: 2,
      name: 'Sad Music'
    },
    {
      id: 3,
      name: 'Chill Music'
    },
    {
      id: 4,
      name: 'Hype Music'
    }
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItems: ''
    }
  }

  render() {
    return (
      <View style={ styles.screen }>
      <Fragment>
        {/* Title */}
        <View style={ styles.title }>
          <Text> Which Mac Miller Song Matches Your Mood? </Text>
        </View>
          {/* Single Dropdown Menu */}
          <SearchableDropdown
            onItemSelect={(item) => {
              const items = this.state.selectedItems;
              this.setState({ selectedItems: [...items, item]});
            }}
            containerStyle={{ padding: 25, alignSelf: 'center' }}
            onRemoveItem={(item, index) => {
              const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
              this.setState({ selectedItems: [...items, item] });
            }}
            itemStyle={{
              padding: 10,
              marginTop: 2,
              backgroundColor: '#ddd',
              borderColor: '#bbb',
              borderWidth: 1,
              borderRadius: 5,
            }}
            itemTextStyle={{ color: '#222' }}
            itemsContainerStyle={{ maxHeight: 140 }}
            items={items}
            defaultIndex={''}
            resetValue={false}
            textInputProps={
              {
                placeholder: "What kind of music do you want to hear?",
                underlineColorAndroid: "transparent",
                style: {
                    padding: 12,
                    borderWidth: 1,
                    borderColor: '#ccc',
                    borderRadius: 5,
                },
              }
            }
            listProps={
              {
                nestedScrollEnabled: true,
              }
            }
        />

      {/* Button */}
      <View style={ styles.button }>
        <Button
          title="Press me for a Mac Miller song!"
          onPress={() => 
            this.macSong()}
        />
      </View>
      </Fragment>
      </View>
    );
  }

  /* Different Mood Function */
  macSong() {
    console.log(this.state.selectedItems)
    if (this.state.selectedItems.some(item => item.name === 'Happy Music')) {
      let songs = ['best day ever', 'kool aid & frozen pizza', 'nikes on my feet'];
      let song = songs[Math.floor(Math.random() * songs.length)];
      console.log(song);
    } else if (this.state.selectedItems.some(item => item.name === 'Sad Music')) {
        let songs = ['self care', 'ROS', 'stay', 'whats the use'];
        let song = songs[Math.floor(Math.random() * songs.length)];
        console.log(song);
    } else if (this.state.selectedItems.some(item => item.name === 'Chill Music')) {
        let songs = ['good news', 'claymation', 'the star room'];
        let song = songs[Math.floor(Math.random() * songs.length)];
        console.log(song);
    } else if (this.state.selectedItems.some(item => item.name === 'Hype Music')) {
        let songs = ['donald trump', 'remember', 'weekend'];
        let song = songs[Math.floor(Math.random() * songs.length)];
        console.log(song);
    } else {
        console.log("Selected Item is Unknown");
    }
  }
}

{/* StyleSheet */}
const styles = StyleSheet.create({
  button: {
    padding: 10,
    alignSelf: 'center'
  },
  title: {
    padding: 30,
    alignSelf: 'center',
    textAlign: 'center'
  }
});

Answer 1

Сначала вы вызываете macSong() без аргументов при нажатии кнопки, но при его определении у вас есть аргумент macSong(selectedArguments) { ... }. Это не нужно, потому что вы захватываете this.state.selectedItems в рамках своей функции. Таким образом, правильным будет macSong() { ... }.

Тогда это должно быть this.state.selectedItems.map(item => item.name).includes("Happy Music") et c., Потому что item - это объект, который имеет name в качестве свойства, и когда вы проверяете, объект includes("string") вам нужно проверить массив строк (что будет делать map()).

Answer 2

this.state.selectedItems - это массив объектов следующей формы:

{ id: Number, name: String }

Если мы посмотрим на ваши операторы if, ваши условия выглядят так:

if (this.state.selectedItems.includes('Happy Music')) {

Ваш массив объекты никогда не будут содержать простую строку. Вы хотите проверить, включает ли в объект объект с именем этой строки. Вы можете использовать некоторые для этого. Примерно так:

if (this.state.selectedItems.some(item => item.name === 'Happy Music'))

Надеюсь, это вернет вас в рабочее состояние. Посмотрев на ваш код, похоже, у вас есть возможность упростить эту логику c после этого.