Question

当我按下<TouchableOpacity>按钮时，我想要值＆＃39; abc＆＃39;要附加到数组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')})}

Answer 2

功能列表仅推送数组中的数据，但不会重新呈现视图，因此您必须使用 setState 或 forceUpdate 。

你可以像这样实现onpress功能。

onPress = () =>{
  this.state.selectedTags.push("abc");
  this.setState({selectedTags : this.state.selectedTags});
}

无法在React Native中显示数组

2 个答案: