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>

    );
  }

...

反应原生扁平列表不渲染

1 个答案: