反应本机平面列表不呈现

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>

    );
  }

...