当道具改变时，React-native FlatList 不会重新渲染行

Question

我在使用新的 FlatList 组件时遇到问题。具体来说，它不会重新呈现它的行，即使该行依赖于更改的道具。

FlatList 文档说：

This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

问题

但是，看到我更改了 selectedCategory 项目的 ID - 应该指示该行是否为 'selected' 的道具 - 我相信道具应该重新呈现。我错了吗？

我检查了列表和行组件的 'componentWillReceiveProps' 方法，列表接收更新很好，但从未调用行的生命周期方法。

如果我在列表组件中包含一个随机的、无用的布尔状态值，并在 props 更新时来回切换它，它会起作用——但我不知道为什么？

state = { updated: false };

componentWillReceiveProps(nextProps) {
  this.setState(oldstate => ({
    updated: !oldstate.updated,
  }));
}

<FlatList
  data={this.props.items.allAnimalCategories.edges}
  renderItem={this._renderRow}
  horizontal={true}
  keyExtractor={(item, index) => item.node.id}
  randomUpdateProp={this.state.updated}
/>

代码

我的代码结构是这样的：我有一个包含所有逻辑和状态的容器组件，其中包含一个 FlatList 组件（演示，无状态），它又包含一个自定义演示行。

Container
  Custom list component that includes the FlatList component
  (presentational, stateless) and the renderRow method
    Custom row (presentational, stateless)

容器包含此组件：

 <CustomList
   items={this.props.viewer}
   onCategoryChosen={this._onCategoryChosen}
   selectedCategory={this.state.report.selectedCategory}
 />

自定义列表：

class CustomList extends Component {
  _renderRow = ({ item }) => {
    return (
      <CustomListRow
        item={item.node}
        selectedCategory={this.props.selectedCategory}
        onPressItem={this.props.onCategoryChosen}
      />
    );
  };

  render() {
    return (
      <View style={_styles.container}>
        <FlatList
          data={this.props.items.categories.edges}
          renderItem={this._renderRow}
          horizontal={true}
          keyExtractor={(item, index) => item.node.id}
          randomUpdateProp={this.state.updated}
        />
      </View>
    );
  }

}

（数据来自中继）

最后一行：

render() {
    const idsMatch = this.props.selectedCategory.id == this.props.item.id;
    return (
      <TouchableHighlight onPress={this._onItemPressed}>
        <View style={_styles.root}>
          <View style={[
              _styles.container,
              { backgroundColor: this._getBackgroundColor() },
            ]}>
            {idsMatch &&
              <Image
                style={_styles.icon}
                source={require('./../../res/img/asd.png')}
              />}
            {!idsMatch &&
              <Image
                style={_styles.icon}
                source={require('./../../res/img/dsa.png')}
              />}
            <Text style={_styles.text}>
              {capitalizeFirstLetter(this.props.item.name)}
            </Text>
          </View>
          <View style={_styles.bottomView}>
            <View style={_styles.greyLine} />
          </View>
        </View>
      </TouchableHighlight>
    );
  }

该行不是那么有趣，但我将其包括在内是为了表明它完全是无状态的并且依赖于它的父属性。

状态更新如下：

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report;
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
  };

状态看起来像这样：

state = {
    ...
    report: defaultStateReport,
  };

const defaultStateReport = {
  selectedCategory: {
    id: 'some-long-od',
    name: '',
  },
  ...
};

Answer 1

这里的问题在于

您正在改变现有状态切片，而不是创建变异副本

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report; // This does not create a copy!
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
};

这应该是

_onCategoryChosen = category => {
    var oldReportCopy = Object.assign({}, this.state.report);
    oldReportCopy.selectedCategory = category;
    // setState handles partial updates just fine, no need to create a copy
    this.setState({ report: oldReportCopy });
};

FlatList 的 props 保持不变，你的 _renderRow 函数可能依赖于确实改变的 selectedCategory prop（如果不是第一个错误），但是 FlatList组件不知道这一点。要解决这个问题，请使用 extraData prop.
```
 <FlatList
   data={this.props.items.categories.edges}
   renderItem={this._renderRow}
   horizontal={true}
   keyExtractor={(item, index) => item.node.id}
   extraData={this.props.selectedCategory}
 />
```

Answer 2

只需将 props 传递给 extraData 在 flat list 组件中即可解决此问题，例如这个，

  <FlatList
    data={this.props.data}
    extraData={this.props}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
  />

Answer 3

我同意 Nimelrian 的观点。此外，如果您的状态是一个数组，您可以通过执行以下操作从该状态创建一个数组对象：

 var oldReportCopy = Object.assign([], this.state.report);

然后使用 .push() 方法将新对象添加到其中，如下所示：

oldReportCopy.push(selectedCategory);

然后您可以将这个新数组对象设置回状态：

this.setState({ report: oldReportCopy });

Answer 4

也许其他人不会遇到这种情况，但我意识到只有当 FlatList 呈现的项目数组变空时我才会遇到麻烦。在我的例子中，我只需要根本不渲染 FlatList，而是在它的位置渲染一个不同的视图，这当然解决了我的问题 "not re-rendering".

Answer 5

就我而言，我只是在使用 keyExtractor

时犯了一个简单的错误

我变了

keyExtractor={(item, index) => index.toString()}

到

keyExtractor={(item, index) => item.key}

过滤我的列表后，我看到了一些奇怪的效果，过滤掉的组件的 props 代替了新组件的 props，我的直觉是因为我使用的是数组的索引而不是唯一键，我只是将旧的 props 传递给新的组件，尽管基础组件实际上正在发生变化。

Answer 6

查看第 4 行

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report;
    oldReportCopy.selectedCategory = category;
    this.setState({ report: [...oldReportCopy] }); // Notice this line
  };

Answer 7

这对我不起作用

       setTabData(tabD);

这对我有用

      setTabData([...tabD]);

Answer 8

在 React Hooks 中你可以这样做：

const onPressLeaderSelect = (item, index) => {
    let oldMemberCopy = Object.assign([], teamMemberArr);  //'teamMemberArr' is local state
    let objIndex = oldMemberCopy.findIndex((obj => obj.teamLeader == 1));
    oldMemberCopy[objIndex].teamLeader = 0
    oldMemberCopy[index].teamLeader = 1
    console.log('onPressLeaderSelect', oldMemberCopy)
    setteamMemberArr(oldMemberCopy)
}

Answer 9

这可能会有帮助 FlatList code

/**
 * Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout.
 * Items should all be the same height - masonry layouts are not supported.
 */
numColumns?: number | undefined;

当道具改变时，React-native FlatList 不会重新渲染行

React-native FlatList not rerendering row when props change

react-native

react-native-listview