reagieren nativen Daten nicht auf componentDidMount

Question

my picture debug on chrome

'use strict'; 
import NavigationBar from 'react-native-navbar'; 
import InvertibleScrollView from 'react-native-invertible-scroll-view'; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View, 
    ScrollView, 
    AsyncStorage, 
    TouchableHighlight, 
    TouchableOpacity, 
} from 'react-native'; 

var RNFS = require('react-native-fs'); 

var Thumb = React.createClass({ 

    render: function() { 
    return (
     <TouchableOpacity 
     style={styles.itemleft} 
     onPress={()=> { 
     }} > 
     <View style={{flexDirection:'column', backgroundColor:'#dbecf0'}} > 
      <View> 
      <Text 
       style={{fontSize: 30, textAlign: 'left',}}> 
       {this.props.node.name} 
       </Text> 
      </View> 
      <View> 
      <Text style={{fontSize:14, marginRight:5}}>{this.props.node.path}</Text> 
     </View> 
    </View> 
    </TouchableOpacity> 
    ); 
    } 
}); 

var createThumbRow = (node, i) => <Thumb key={i} node={node} />; 

export default class FileManager extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     isview:false, 
     filelist: [], 
    }; 
    }; 

    componentWillMount() { 
    let self = this; 

    RNFS.readDir(RNFS.DocumentDirectoryPath) 
    .then((result) => { 
     console.log('is find data', result); 
     return Promise.all([RNFS.stat(result[0].path), result[0].path,  result[0].name]); 
    }) 
.then((statResult) => { 
    if (statResult[0].isFile()) { 
    var tn = statResult[2]; 
    var tp = statResult[1]; 

    self.state.filelist.push({name:{tn}, path:{tp}}); 
    self.setState({isview:true}); 
    console.log('componentDidMount of filelist in then', this.state.filelist); 
     } 
     return 'no file'; 
    }); 
console.log('componentDidMount of filelist out then', this.state.filelist); 
    } 

    makeItems() { 
    var items = []; 
    var i = 0; 
    for (var c in this.state.filelist) { 
     items.push(
     <Thumb key={++i} name={c.name} path={c.path} /> 
     ); 
    } 
return items; 
    } 

render() { 
    var index = 0; 
    let self = this; 
    let titleConfig = { title: 'Meteor File', tintColor: 'white' }; 
    var leftButtonConfig = { 
     title: 'Back', 
     tintColor: '#fff', 
     handler: function onNext() { 
     self.props.navigator.push({ 
      name: 'ChatAndroid' 
     }) 
     } 
    }; 


    console.log('render of filelist', this.state.filelist); 
    return (
     <View style={{flex: 1, backgroundColor:'#c2ede9'}}> 
     <NavigationBar title={titleConfig} leftButton={leftButtonConfig} tintColor="#1A263F"/> 
     <ScrollView style={{flex: 8}}> 
      {this.state.filelist.map(createThumbRow)} 
     </ScrollView> 
     </View> 
    ); 
    } 

}; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    itemleft: { 
    backgroundColor:'#e6f0ec', 
    justifyContent: 'flex-start', 
    alignItems: 'stretch', 
    margin: 10, 
    height:60, 
    }, 
}); 

Im Bild drücken kann, ich habe die Datei finden und schieben Sie es in ‚Dateiliste‘ auf nach, aber ‚setstate‘ funktioniert nicht, haben nicht Ausführen der Renderfunktion Sie können sehen von 'render of filelist'. Also, was ist los ?????? Hilfe !!!!!

Answer 1

Sie können nicht .push() direkt zu this.state. Die einzige Möglichkeit, den Status zu ändern, ist das Aufrufen von this.setState(). In Ihrem Fall sollten Sie den Dateilistenform-Status wie let fileList = this.state.filelist kopieren, dann ein Objekt fileList.push({name:{tn}, path:{tp}}) drücken und als nächstes den Status this.setState({filelist: fileList}) eingeben.