未正确调用组件构造函数答案

【问题标题】：Component Constructor not being called correctly未正确调用组件构造函数
【发布时间】：2017-04-19 09:58:07
【问题描述】：

我是相当新的反应，我正在编写一个应用程序，它格式化一个文本字符串，看起来有点像 IOS 上的文本消息（请参阅我的渲染函数了解我的意思）。这是代码...

import React, { Component } from 'react';

import {
  TouchableOpacity,
  TouchableHighlight,
  StyleSheet,
  ScrollView,
  Image,
  Alert,
  Text,
  TextInput,
  View,
} from 'react-native';

import styles from './styles';
import SearchBar from 'react-native-search-bar';
import Group from './Group';

var data;
var title="";
var editor="";
var body="";
var number = 0;

class Document extends Component {
// Initialize the hardcoded data

constructor(props) {
  super(props);
  this.state = {
    name: ''
  };

  data="";
  title="";
  editor="";
  body="";
  number=0;

  data = props.data;

  for(let i = 0; i < data.length; i++){
      var char = data[i];

      if(char == "\n"){
        number+=1;
      }else{
        if(number==0){
            title+= char;
        }

        if(number==2){
          editor+=char;
        }

        if(number>=4){
          body+=char;
        }
      }
  }
}

render() {
    return(
      <View style = {{backgroundColor: 'white'}}>
        <Text style = {{fontSize: 16, marginBottom: 2,}}>{title}</Text>
        <Text style = {{fontSize: 14, marginBottom: 2,}}>{editor}</Text>
        <Text style = {{fontSize: 12, marginBottom: 2, color: 'grey'}}>{body}</Text>
      </View>
    )
}
}

export default Document

这个组件是另一个组件的一部分，它具有其他元素，如搜索栏、组部分以及我自己实现的导航项。

当我导航到包含此组件的视图时，该组件不显示。从字面上看，没有任何渲染。但是，如果我离开该部分，然后返回它，一切都会按预期呈现。我想知道为什么会这样？

注意：如果我添加一个简单的

<Text>Hello</Text>

作为视图部分中的唯一元素，它按预期呈现。

注意2：提前为糟糕的代码道歉，我一直在尽一切努力让它工作。

对不起，如果我没有很好地解释这一点，但任何帮助将不胜感激

编辑：添加父级

import React, { Component } from 'react';

import {
  TouchableOpacity,
  TouchableHighlight,
  StyleSheet,
  ScrollView,
  Image,
  Alert,
  Text,
  TextInput,
  View,
} from 'react-native';

import styles from './styles';
import SearchBar from 'react-native-search-bar';
import Document from './Document';
import RNFetchBlob from 'react-native-fetch-blob';

var documents = [];
var number = 0;
var data = '';
var base64 = require('base-64');
var files = ["test.txt", "testTwo.txt"]

class Group extends Component {
// Initialize the hardcoded data

constructor(props) {
    super(props);
    this.state = {
      name: ''
    };

    this._readFile('test.txt');
}

_readFile(name){
  RNFetchBlob.fs.readStream(
    '/Users/XXXXXX/XXXX/documents/' + name,
    'base64',
    4095)
  .then((ifstream) => {
    ifstream.open()
    ifstream.onData((chunk) => {
      data = chunk
    })

    ifstream.onError((err) => {
      console.log('oops', err)
    })

    ifstream.onEnd(() => {
      this._decodeData()
    })
  })
}

_writeFile(value){
  RNFetchBlob.fs.writeFile(
    '/Users/XXXX/XXXX/documents/testTwo.txt',
    RNFetchBlob.base64.encode(value),
    'base64')
  .then(()=>{
    console.log('success!')
  })
}

_decodeData(){
  data = base64.decode(data)
}


render(){
    return (
        <View>
        <Document data = {data}></Document>
        </View>
    )
}
}

export default Group

【问题讨论】：

可能道具在构造函数中当时不可用。您可以通过调试验证吗？最常见的做法是处理componentWillReceiveProps 和componentWillMount 和setState 中的数据。另一种方法是从构造函数内部的渲染方法中移动处理
我认为，最初 props.data 的值是空白或 null，因为它没有显示数据，以验证使用 console.log(props.data)，您是从 api 获取该数据吗？你能显示父组件吗？
@MayankShukla 我进行了编辑:-)

标签： reactjs react-native react-native-ios react-native-navigation

【解决方案1】：

我没有查看第二个代码，但我从第一个示例中猜到了问题所在。 title editor 和 body 没有定义。可能是范围问题。

我认为你应该像 this.title = 'stuff' 这样在构造函数中定义这些变量，然后在渲染调用中将它们称为 {this.title}。

【讨论】：