尝试为一组标记添加选定/未选定状态

Question

我正在尝试为用户创建一个屏幕，以便根据他们的兴趣选择几个标签。

我无法更新状态;如果用户选择特定的兴趣，它会将 id 传递给 handleclick 函数，但不更新兴趣数组/状态。

import React from 'react';
import { Button, Text, View, StyleSheet, TouchableOpacity, Alert } from 'react-native';
var Dimensions = require('Dimensions');
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;
class Interest extends React.Component {
static navigationOptions = {
}
  constructor(props) {
    super(props);
    this.state ={
      interests: [
        {id:0, value: 'Interest 1', tagSelection: 'tagUnselected'},
        {id:1, value: 'Interest 2', tagSelection: 'tagUnselected'},
        {id:2, value: 'Interest 3', tagSelection: 'tagUnselected'},
        {id:3, value: 'Interest 4', tagSelection: 'tagSelected'},
        {id:4, value: 'Interest 5', tagSelection: 'tagUnselected'},
        {id:5, value: 'Interest 6', tagSelection: 'tagUnselected'},
      ]
  };
   // this.handleClick = this.handleClick.bind(this)
}
  handleClick = (interestId)=> {
  this.state.interests.map(interest => {
    if(interest.id === interestId && interest.tagSelection == 'tagSelected'){
        console.log('this is tag unselected', interestId)
        var selectedObj = {
          id: interest.id,
          value: interest.value,
          tagSelection: 'tagUnselected'
        }
     let intArray = [...this.state.interests];
     intArray[interestId] = selectedObj;
     this.setState({interests: intArray})
    }
    else if (interest.id === interestId && interest.tagSelection == 'tagUnselected'){
      console.log('this is tag unselected', interestId)
        var unselectedObj = {
          id: interest.id,
          value: interest.value,
          tagSelection: 'tagSelected'
      }
     let intArray = [...this.state.interests];
     intArray[interestId] = selectedObj;
     this.setState({interests: intArray})
    }
  })
}

  render() {
    return (
      <View style={styles.container}>
      { this.state.interests.map(interest => {
        return (
          <TouchableOpacity
            key = {interest.id}
            onPress= {()=> {this.handleClick(interest.id)}}
            style = {interest.tagSelection == 'tagUnselected' ? styles.tagUnselected : styles.tagSelected }
            >
          <Text style={styles.textUnselected}> {interest.value} </Text>
        </TouchableOpacity>
        )
      })
    }
      </View>
    );
  }
}
const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor: 'black',
   },
   tagUnselected: {
     fontSize: 18,
     width: deviceWidth*.35,
     height: 40,
     fontWeight: '500',
     borderColor: 'red',
     borderWidth: 1.5,
     borderRadius: 40,
     marginTop:40,
     marginHorizontal: 15,
     alignItems: 'center',
   },
   tagSelected: {
     fontSize: 18,
     fontWeight: 'bold',
     width: deviceWidth*.35,
     backgroundColor: 'red',
     height: 40,
     fontWeight: '500',
     borderColor: 'red',
     borderWidth: 1.5,
     borderRadius: 40,
     marginTop:40,
     marginHorizontal: 15,
     alignItems: 'center',
     color: 'black'
   },
   textSelected: {
    color: 'red',
    paddingTop: 10
   },
   textUnselected: {
    backgroundColor: 'red',
    paddingTop: 10,
    color: 'black'
   },
   button: {
    marginTop: 40,
    marginHorizontal: 15,
    alignItems: 'center',
    backgroundColor: '#0093FF',
    padding: 10,
  },
    loginNavigateButton: {
     color: 'red',
     marginTop:40,
     marginHorizontal: 15,
     alignItems: 'center',
  },
})
export default Interest

在选择标记时，用户应该能够看到他选择突出显示的标记。

Answer 1

该handleClick函数中似乎发生了太多事情。

我认为您应该使用过滤器来查找您要查找的项目，而不是地图。

您可以使用过滤器查找该项目，然后检查它是否已被选中，并从中更新其状态。

handleClick = (interestId) => {
  let interests = this.state.interests.filter(interest => interest.id === interestId);
  if (interests.length === 1) {
    let interest = interests[0];
    if (interest.tagSelection === 'tagUnselected') {
      interest.tagSelection = 'tagSelected';
    } else {
      interest.tagSelection ='tagUnselected';
    }
     let intArray = [...this.state.interests];
     intArray[interestId] = interest;
     this.setState({interests: intArray})
  }
}

这是它工作的小吃 https://snack.expo.io/ry-dAv9fE

就个人而言，我不会使用一串tagSelected或tagUnselected我会为此使用布尔值