javascript - 无法在 React Native 中显示数组

Question

当我按<TouchableOpacity>时按钮，我希望将值“abc”附加到数组 selectedTags，然后 <Text> {this.list()} </Text>将打印出我的数组。
但现在当我按下按钮时，没有任何显示。

有人知道我的代码有什么问题吗？

export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          selectedTags: []
        }
  }

  list() {
  return this.state.selectedTags.map(function(tags, i){
    return(
      <View key={i}>
        <Text>{tags.name}</Text>
      </View>
    );
  });
}

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity  onPress={() => this.state.selectedTags.push('abc')} key = {1} style={styles.buttonContainer}>
              <Text style={styles.buttonText}> Button </Text>
         </TouchableOpacity>

          <Text> {this.list()} </Text>
      </View>
    );
  }
}

Answer 1

这是因为您从未调用 setState，这会触发组件的重新渲染。

而不是使用:

onPress={() => this.state.selectedTags.push('abc')}

尝试:

onPress={() => this.setState({selectedTags: this.state.selectedTags.concat('abc')})}