FlatList 调用两次

Question

我有这个代码

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
        dataSource: []
    }
    this._handleRenderItem = this._handleRenderItem.bind(this);
    this._keyExtractor = this._keyExtractor.bind(this);
  }

  componentDidMount() {

    let success = (response) => {
        this.setState({ dataSource: response.data });
    };

    let error = (err) => {
        console.log(err.response);
    };

    listarProdutos(success, error);
  }

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

  _handleRenderItem = (produto) => {
    return (
        <ItemAtualizado item={produto.item} />
    );
  }

  render() {
    return (
        <Container style={styles.container}>
            <Content>
                <Card>
                    <CardItem style={{ flexDirection: 'column' }}>
                        <Text style={{ color: '#323232' }}>Produtos atualizados recentemente</Text>
                        <View style={{ width: '100%' }}>
                            <FlatList
                                showsVerticalScrollIndicator={false}
                                data={this.state.dataSource}
                                keyExtractor={this._keyExtractor}
                                renderItem={this._handleRenderItem}
                            />
                        </View>
                    </CardItem>
                </Card>
            </Content>
        </Container>
    );
  }
}

export default Home;

该函数_handleRenderItem()被调用两次，我找不到原因。第一次 my 里面的值<ItemAtualizado />是空的，但第二次是一个对象。

Answer 1

这是正常的 RN 行为。首先，当创建组件时，您有一个空的 DataSource ([])，因此 FlatList 会用它来呈现。

之后，componentDidMount触发并加载更新的数据，从而更新DataSource。

然后，您使用 setState 更新状态，这会触发重新渲染以更新 FlatList。

这里一切正常。如果您想尝试，请在构造函数中加载数据源，并在 componentDidMount 中删除加载。它应该只触发一次。