ネイティブフラットリストに反応しません

Question

私は反応したネイティブで実験していましたが、私はFlatListを正しくレンダリングできません。ここにコンポーネントがあります。重要な場合は、react-navigationを使用してこのコンポーネントをレンダリングしています。

class FactoryScreen extends React.Component { 
    static navigationOptions = { 
    title: 'test test', 
    }; 

    constructor(props) { 
    super(props); 

    this.state = { 
     datasource: [ 
     { 
      id: 21, machine_key: 'f', clamp_id: 'c0', 
     }, 
     { 
      id: 22, machine_key: 'f', clamp_id: 'c1', 
     }, 
     { 
      id: 23, machine_key: 'f', clamp_id: 'c2', 
     }, 
     ] 
    }; 
    } 

    render() { 
    const { goBack } = this.props.navigation; 
    return (
     <List style={{flex: 1}}> 
     <FlatList 
      data={this.state.datasource} 
      renderItem={({item}) => { 
      console.log(item); 
      return (<ListItem title={`${item.clamp_id} clamp`} />); 
      }} 
     /> 
     </List> 
    ); 
    } 
} 

私は私のitemオブジェクトは、コンソールにログインして見ることができますが、私はそれが何らかの理由でレンダリングすることができません。私が間違ってやっていることに関する考えは？

Answer 1

問題は、ナビゲーション

まず、あなたの<LisItem>コンポーネントがデータを表示できることを確認し反応しないです。このコンポーネントがネイティブベースの場合、Listコンポーネントのマニュアルを確認してください。here

これにはキーエクストラクタが必要です。例えば

... 

    _keyExtractor = (item, index) => item.id; 

    render() { 
    return (
     <List style={{flex: 1}}> 
     <FlatList 
      data={this.state.datasource} 
      keyExtractor = {this._keyExtractor} 
      renderItem={({item}) => { 
      console.log(item); 
      return (<Text>{`${item.clamp_id} clamp`} clamp</Text>); 
      }}   
     /> 
     </List> 

    ); 
    } 

...