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,
   },
 });

在图片中，我找到了该文件并将其推入文件列表＆＃39;在之后，但是＆＃39; setstate＆＃39;不起作用，没有运行渲染功能。你可以从＆＃39;渲染文件列表＆＃39;中看到。那么，有什么不对的??????帮助!!!!!

Answer 1

你不能.push()直接到this.state。更改状态的唯一正确方法是调用this.setState（）。在您的情况下，您应该复制像let fileList = this.state.filelist这样的文件列表表单状态，然后推送对象fileList.push({name:{tn}, path:{tp}})，然后将其设置为this.setState({filelist: fileList})状态。

本机无法在componentDidMount上推送数据

1 个答案: