需要 Flatlist 和数组的帮助

debugcn 发表于 Dev

泰伦

下午好，实际上我无法查看包含数组内容的平面列表。数组添加正确的数据但 flatlist 不显示任何内容。另外，我想在数组的每一行上设置一个按钮到 flatlist 中。

数据 "chosenDate" ，是从数据选择器接收的数据（例如： "27 Agosto 2019 16:59" ）并添加到数组中

感谢帮助。

var SampleArray = [];

export default class DateTimePickerTester extends Component {
handleDatePicked = date => {

    this.setState({ chosenDate: moment(date).format('Do , MMMM YYYY HH:mm') });
    SampleArray.push(this.state.chosenDate.toString())
    console.log(SampleArray.toString());

  };
 FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }
 render() {

    return (
      <>
   <FlatList
            data={this.SampleArray}
            keyExtractor={(item, index) => item.key}
            renderItem={({ item, index }) => (
              <TouchableHighlight>
                <View style={{ backgroundColor: 'black' }}>
                  <Text>{item}</Text>
                </View>
              </TouchableHighlight>

            )}></FlatList>

泰伦

原来是这样解决的。

  constructor(props) {
    super(props)
    this.array = [],
      this.state = {
        isDateTimePickerVisible: false,
        chosenDate: '',
        arrayHolder: [],
       };
  }

.....

 handleDatePicked = date => {
    this.setState({ chosenDate: moment(date).format('Do , MMMM YYYY HH:mm') },
      () => this.array.push({title : this.state.chosenDate.toString()})
    );
    this.setState({ arrayHolder: [...this.array] })

  };

.....
      <FlatList
            data={this.state.arrayHolder}
            width='100%'
            extraData={this.state.arrayHolder}

            keyExtractor={(item, index) => 'key'+index}
            ItemSeparatorComponent={this.FlatListItemSeparator}
            renderItem={({ item }) => <Text style={style.item} onPress={this.GetItem.bind(this, item.title)} > {item.title} </Text>}
          />

有什么建议可以改进吗？

感谢帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。