如何制作带有条件语句的函数来确定按下按钮时的操作?(React Native)

Question

这是我当前的app.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]});
}}

然后在你的Difference moods函数中，你使用了单个"="，这意味着分配，而不是比较。只需使用

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

在你的if语句中，我想它会像你期望的一样工作