FlatList 调用两次答案

【问题标题】：FlatList calling twiceFlatList 调用两次
【发布时间】：2018-01-20 14:53:45
【问题描述】：

我有这个代码

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

【问题讨论】：

您的状态处理可能有问题导致重新渲染。
如果您可以在codesandbox.io 中创建可重现的代码部分会很有帮助
为什么要绑定 _handleRenderItem 和 _keyExtractor？请删除它并仅在平面列表中使用

标签： reactjs react-native

【解决方案1】：

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

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

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

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

【讨论】：

我已将数据源调用从 componentDidMount 更改为构造函数，但仍然是同样的问题：stackoverflow.com/questions/51365912/…

【解决方案2】：

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

例如：

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

如果好友数量不变，它会中断渲染。

【讨论】：

【解决方案3】：

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

【讨论】：