需要有关 Flatlist 和数组的帮助答案

【问题标题】：Need help for Flatlist and array需要有关 Flatlist 和数组的帮助
【发布时间】：2019-08-27 12:45:09
【问题描述】：

下午好，实际上我无法使用我的数组内容查看平面列表。数组正确添加数据，但 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>

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

应该是这样的

//示例代码

renderListNotes = () => {
return(
<FlatList
data={data}
renderItem={(note) =>{
if (note) {
return <NoteView key={note.noteId} note={note} event={this.props.event}/> }    
}}
/>
)
}

【讨论】：

【解决方案2】：

像这样更新你的 setState 方法

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

由于 setState 是一个异步方法，所以你需要将 push 函数作为 setState 的回调来处理。

【讨论】：

【解决方案3】：

即使将数据添加到数组中，Flatlist 也不会再次呈现自身，因此您需要使用 Onfresh 函数重新呈现它。单击Flatlist 列表并向下滚动。然后您的数据将使用 indicator 进行更新。

handleDatePicked(date){

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

  };
...
 <FlatList
           refreshing={this.state.refreshing}
           onRefresh={this.handleDatePicked}

示例

var SampleArray = ['2017','2018'];

class ScreenComponentOne extends React.Component {
  constructor(props){
    super(props);
    this.state={
      refreshing: false,
      date: 'gg',
    }
  }
   static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: `First`,
    };
  };

  testfunc() {
  }

   onRefresh = () => {
    this.setState({ date: '2019'}, () => SampleArray.push(this.state.date));
  }


  render() {
    return (
      <View
        style={{
          flex: 1,
        }}>
         <FlatList
           refreshing={this.state.refreshing}
           onRefresh={this.onRefresh}
            data={SampleArray}
            keyExtractor={(item, index) => item.key}
            renderItem={({ item, index }) => (
              <TouchableHighlight style={{width:"100%",height:40,backgroundColor:'red'}}>
                  <Text>{item}</Text>
              </TouchableHighlight>

            )}/>
      </View>
    );
  }
}

【讨论】：

【解决方案4】：

其实就这样解决了。

  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>}
          />

有什么改进的建议吗？

感谢您的帮助！

【讨论】：