Question

使用FlatList时我有两个问题（它们都适用于ListView）。

我有一个列表，通过每个项目的显示属性显示，然后在我的FlatList中检查，如下所示：

<FlatList
  ref='flatList'
  data={this.state.dataSource}
  enableEmptySections
  renderItem={({item}) => item.display && <Text>{item.text}</Text>} />

当我更改显示属性时，它不会显示。这在ListView设置中运行良好。

我的第二个问题是scrollToEnd在＆＃34; this._listref＆＃34;上发出了一个未定义的错误。这是在scrollToEnd函数内。我没有传递任何参数。

setTimeout(this.refs.flatList.scrollToEnd, 0)

我的问题是，如何更新数组中的数据以便列表更改，第二个问题是如何修复scrollToEnd错误？

更新1：（已删除数据，不再需要）

更新2：问题一解决了，列表需要＆＃34; extraData＆＃34;比较，看它是否更新。固定版：

<FlatList
  ref='flatList'
  data={this.state.dataSource}
  extraData={this.state}
  enableEmptySections
  renderItem={({item}) => item.display && <Text>{item.text}</Text>} />

这有点令人费解，但我相信extraData可以作为比较来查看该数据集中的任何内容是否更新。如果是这样，请重新渲染。那个问题就解决了。

＆＃34; undefined不是对象（评估＆＃39; this._listRef＆＃39;）＆＃34;仍未修复

更新3：滚动功能在setTimeoutfunction

之外工作

更新4：

设置初始数据数组

  this.state = {
    dataSource: pageService(state.params.page),
    cursor: 0
  }

将显示设为true：

  renderNextModule() {
    let newCursor = this.state.cursor
    if (newCursor < this.state.dataSource.length-1) {

        newCursor++
        let newSource = this.state.dataSource
        newSource[newCursor].display = true
        this.setState({
            dataSource: newSource,
            cursor: newCursor
        })
    }
  }

Answer 1

对我有用

data={this.state.messages}
ref = "flatList"
onContentSizeChange={()=> this.refs.flatList.scrollToEnd()}

Answer 2

this._listRef未定义，因为setTimeout调用该函数并将其上下文（this）设置为null。

作为一种解决方法，您实际上可以使用包装函数（此处使用ES6语法）：

setTimeout(() => this.refs.flatList.scrollToEnd(), 0)

关于你的第一个问题，我认为你没有以正确的方式解决它。你是对的，它使用浅层比较，但你可能不需要extraData道具。

您是否直接改变了数组？您如何更新item.display属性？

对于你的第一个问题，
替换此行

let newSource = this.state.dataSource

通过这个

let newSource = this.state.dataSource.slice()

在JavaScript中，数组是通过引用复制的，这意味着你没有克隆数组而是改变它;并且FlatList效率很高（这适用于每个PureComponent），当你想重新渲染它时（通过像你一样设置状态），它会进行===比较它的新旧道具，看看有什么变化。

当您改变旧数组时，'oldArray === newArray'，因此决定不再更新。

这有点简洁快速，但您可以详细了解为什么需要使用.slice() here创建新数组。这适用于JavaScript中的数组和对象。

Answer 3

如果是功能组件。

let flatList = React.useRef(null);

和您的FlatList组件中

<FlatList
  ref={flatList}
  onContentSizeChange={()=> flatList.current.scrollToEnd()}
  ....
 />

使用带有scrollToEnd的FlatList

3 个答案: