我有这个代码
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()
被叫了两次,但我找不到原因。第一次我里面的值 <ItemAtualizado />
都是空的,但第二个是一个对象。
最佳答案
这是正常的 RN 行为。首先,当创建组件时,您有一个空的 DataSource ([]),因此 FlatList 会用它来呈现。
之后,componentDidMount触发并加载更新的数据,从而更新DataSource。
然后,您使用 setState 更新状态,这会触发重新渲染以更新 FlatList。
这里一切正常。如果您想尝试,请在构造函数中加载数据源,并在 componentDidMount 中删除加载。它应该只触发一次。
关于reactjs - FlatList 调用两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48357524/