反應本機平面列表不呈現

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組件”文檔

比您需要為此的密鑰提取器。 這是例子

... 

  _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>

    );
  }

...