React Native - 为什么我的条件 If/If Else 语句永远不会通过？

Question

我是 React Native 和 Javascript 的新手，但我在网上找不到任何东西来帮助我解决我遇到的这个问题。

如果语句从未通过，我的“macSong”功能，我不确定为什么，我觉得代码背后的逻辑是合理的，但我的控制台仍然输出“选定的项目是未知的”，因为所有的 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

this.state.selectedItems 是以下形式的对象数组：

{ id: Number, name: String }

如果我们查看您的 if 语句，您的条件看起来像：

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

您的对象数组永远不会包含纯字符串。您想检查 in 是否包含具有该字符串名称的对象。您可以为此使用some。像这样的：

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

希望这能让你回到工作状态。查看您的代码，您似乎有机会在此之后简化此逻辑。

Answer 2

首先，您调用macSong()，在按钮按下时没有参数，但在其定义中，您有一个参数macSong(selectedArguments) { ... }。这不是必需的，因为您正在函数中获取this.state.selectedItems。所以正确的是macSong() { ... }。

那么，它应该是this.state.selectedItems.map(item => item.name).includes("Happy Music") 等，因为item 是一个具有name 作为属性的对象，并且当您检查对象includes("string") 时，您需要检查一个字符串数组（其中map() 可以）。