Как создать функцию с условными выражениями, чтобы определить, что делает кнопка при нажатии? (Реагируй Родной)

Question

Вот мое текущее приложение. js файл. Я хотел бы, чтобы кнопка «знала», какой элемент выпадающего меню выбран, а затем выбрала случайную песню из списка и напишите название этой песни на экране.

В настоящее время, неважно, какое «настроение» вы выбрав, он будет выводить только имена «счастливых песен» в консоли.

Я полагаю, что моя ошибка где-то в моих утверждениях If / If Else, но после нескольких часов отладки / поиска я не смог найти в чем проблема.

По сути, мне нужна функция для вызова onPress моей кнопки, и в этой функции она мне нужна, чтобы определить, какой выпадающий список выбран, и выводить только одну случайную песню из этого "настроения" песен , Однако моя текущая функция «macSong» всегда будет выводить «счастливую» песню, даже если в раскрывающемся меню выбрано что-то еще.

Если что-то по моему вопросу сбивает с толку, пожалуйста, напишите комментарий ниже и позвольте мне знаю, что мне нужно уточнить, спасибо!

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 });
            }}
            itemStyle={{
              padding: 10,
              marginTop: 2,
              backgroundColor: '#ddd',
              borderColor: '#bbb',
              borderWidth: 1,
              borderRadius: 5,
            }}
            itemTextStyle={{ color: '#222' }}
            itemsContainerStyle={{ maxHeight: 140 }}
            items={items}
            defaultIndex={2}
            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(selectedItems) {
    console.log(this.state.selectedItems)
    if (this.state.selectedItems.includes('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.includes('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.includes('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.includes('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({
  screen: {
    backgroundColor: ''
  },
  button: {
    padding: 10,
    alignSelf: 'center'
  },
  title: {
    padding: 30,
    alignSelf: 'center',
    textAlign: 'center'
  }
});

Answer 1

В вашем методе onItemSelect = {(item) => {} вы изменяете свое состояние, помещая ссылку на this.state.selectedItems в константу «items» и передавая ей новое значение, вы должны сделать его неизменным, как это :

onItemSelect={(item) => {
  const items = this.state.selectedItems;
  this.setState({ selectedItems: [...items, item]});
}}

И затем внутри вашей функции «Настроение разницы» вы используете один «=», что означает «назначать, а не сравнивать». Просто используйте

if (selectedItems === 'Happy Music'){

внутри ваших операторов if, и я думаю, что это будет работать так, как вы ожидаете