FlatList 调用两次

IT技术 reactjs react-native
2021-03-27 06:38:54

我有这个代码

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 />是空的,但第二次是一个对象。

在此处输入图片说明

3个回答

这是 RN 的正常行为。首先,当组件被创建时,你有一个空的 DataSource ([]),所以 FlatList 用它来呈现。

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

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

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

我已将数据源调用从 componentDidMount 更改为构造函数,但仍然存在相同的问题:stackoverflow.com/questions/51365912/...
2021-05-25 06:38:54

如果你想控制渲染动作,你可以使用 shouldComponentUpdate 方法。

例如:

shouldComponentUpdate(nextProps, nextState){ if(this.state.friends.length === nextState.friends.lenght) return false; }

如果好友数量不变,它将破坏渲染。

我在这个小吃中重现了这个问题。https://snack.expo.io/B1KoX-EUN - 我确认你可以使用 shouldComponentUpdate(nextProps, nextState) 来区分 this.state 或 this.props 并返回 true/false - https://reactjs.org/docs/ react-component.html#shouldcomponentupdate文档说这个回调应该只用于优化,这就是我们在这里所做的。