将需要参数的函数正确传递给PureComponent

Question

我正在使用FlatList，在我的renderItem中，我有一个名为GridItem的PureComponent。我试图传递wishlistAddPresed函数，它需要item参数，但是当这样做时，PureComponent项目都会在每个状态更改时重新渲染，即使“item”没有更改。

我该如何解决？谢谢！

  wishlistAddPresed = (item) => console.log(item)

  renderItem = ({item}) => {
    return (
        <GridItem
            item={item}
            wishlistAddPresed={this.wishlistAddPresed(item)}
        />
    )
  }

  render () {
      console.log("Render products grid");
      return(
          <View style={styles.container}>
              <FlatList
                  data={this.state.data}
                  renderItem={this.renderItem}
                  keyExtractor={(item, index) => item.id}
              />
          </View>
      );
  }

在我的GridItem的渲染中，我有：

<TouchableOpacity style={styles.colButtonsG} onPress={this.props.wishlistAddPresed}>
    <IconG name='playlist-add-check' size={26} color="green" style={styles.icon} />
</TouchableOpacity>

Answer 1

诀窍是传递回调函数和参数（您已经在做），然后在嵌套组件内部，将项目传递给匿名回调。因此，在您的情况下，您需要执行以下操作：

<FlatList
  data={this.state.data}
  renderItem={({ item }) => {
    return <GridItem item={item} wishlistAddPressed={this.wishlistAddPressed} />
  }}
  keyExtractor={(item, index) => item.id}
/>

对于扩展PureComponent的GridItem ......

class GridItem extends React.PureComponent {
  render() {
    const {item, wishlistAddPresed} = this.props;

    return (
      <TouchableOpacity onPress={() => wishlistAddPressed(item)}>
        <IconG name="playlist-add-check" size={26} color="green" style={styles.icon} />
      </TouchableOpacity>
    );
  }
}

这样做，wishlistAddPressed被调用该行的特定项目，并保持函数相等性，以便PureComponent不会像它应该的那样不正确地重新渲染。