Reactネイティブコンポーネントのヌルオブジェクト（評価 'internalInstance.getHostNode'）

Question

My Reactネイティブアプリケーションにスクロール可能リストを表示するはずのコンポーネントがあります。私はReact Native Elementsも使用していますが、それを残しても大きな違いはありません。

私のコンポーネントは次のようになります。そのと<List>の除去、

ほかに

const renderRow = (rowData, sectionId) => { 
    return (
     <ListItem 
      key={ sectionId } 
      title={ rowData.myProp } 
      subtitle={ rowData.myOtherProp } 
     /> 
    ); 
}; 

：それはその状態を必要としないので、renderRowは以下のように、クラス外で宣言され

export class MyComponent extends React.Component { 
    constructor(props) { 
     super(props); 

     const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
     this.state = { ds: ds.cloneWithRows(this.props.myItems) }; 
    } 

    render() { 
     return (
      <View> 
       <Text>Some text here</Text> 
       <List> 
        <ListView dataSource={ this.state.ds } renderRow={ renderRow } /> 
       </List> 
      </View> 
     ); 
    } 
}; 

子供たちも違いを生むようには見えません。

ログ（コードには含まれていません）から、コンポーネントconstructorが問題なく実行されていることがわかります。ただし、renderメソッドは呼び出されません。 adb logcat出力（私はAndroidのシミュレータを使用しています）で、私は以下を参照してください。

10-16 14:02:34.507 10161 10205 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 0): 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: null is not an object (evaluating 'internalInstance.getHostNode') 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:24 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17792:47 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _reconcilerUpdateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17341:36 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17445:48 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17432:21 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:14715:20 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18495:21 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16688:42 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: runBatchedUpdates@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16299:41 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16 
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&m 
10-16 14:02:34.527 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 17, pending 15) 
10-16 14:02:34.800 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 21, pending 15) 
10-16 14:02:34.801 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 22, pending 20) 
10-16 14:02:34.905 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 26, pending 15) 
10-16 14:02:34.908 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 27, pending 20) 
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 31, pending 15) 
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 32, pending 20) 
10-16 14:02:35.192 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 33, pending 30) 

私は

• を使用してい15.3.2
• を反応させる反応し、ネイティブ0.35.0
• を反応するネイティブ要素0.6.2

私の質問は2つあります：どのようなことが起こっているのかをトラブルシューティングするにはどうすればよいですか（なぜrender()メソッドが呼び出されていないなど）、ここで何が間違っていますか？

Answer 1

実際のソリューションはListViewを使用していなかったことが判明またはList。render()のログステートメントの中には、render()メソッドが失敗してしまうものがありました。 RNはコンポーネントを再レンダリングしようとしました。その結果、質問に表示されているログメッセージが、アプリケーションが終了するまで継続的に再表示されました。

Answer 2

は、私は何が起こっているトラブルシューティングを行うことができますか（理由は私の方法は、例えば、呼び出されません）（レンダリング）

などの使用console.debug(msg)またはconsole.error(msg)、あなたのコード内のメッセージをログに記録してからコンソールを表示しますAndroidの端末react-native log-androidまたはiOSの場合はreact-native log-iosをプロジェクトフォルダから実行してログを記録します。

私はここで間違っていますか？

コードには2つの問題があります。まず、cloneRowsWithDataは、ドキュメントにあるように、はこのデータソースのデータを複製しません。これは、構築時に定義された関数を、データがと指定された新しいデータソースに渡すだけです。したがって、この関数の結果を別の変数に代入する必要があります。第二に、状態はオブジェクトです。 dsを定義しますが、未割り当てのままにしておきます。だから、何をする必要があると、これは次のとおりです。で、その後

constructor(props) { 
    super(props); 

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { dataSource: ds.cloneWithRows(this.props.myItems) }; 
} 

そして、あなたのrender()にListViewコントロールのdataSource小道具を変更：

dataSource={ this.state.dataSource }