React Native FlatList scrollToEnd失效：报无法读取undefined的-1属性错误

嘿，我之前做聊天功能的时候也碰到过几乎一模一样的问题！先帮你拆解下报错的原因，再一步步给你修复方案：

首先，分析报错根源 #

你遇到的TypeError: 无法读取undefined的-1属性，本质是**scrollToEnd调用时机不对**：

1. 你之前写的onLayout={this.scrollNow()}是直接执行了函数，而不是传递函数引用，组件刚渲染就会触发scrollNow，这时候FlatList的ref还没绑定、聊天数据也没加载完成，导致scrollToEnd内部计算列表布局时出错。
2. _fetchConversation里的setState是异步的，你在setState之后直接调用scrollNow，数据还没真正更新到组件里，FlatList还没渲染出列表项，滚动逻辑自然会出问题。
3. 你的_renderItem参数写法错误，FlatList的renderItem回调参数是({item, index})，而不是(item, index)，这会导致列表项渲染异常，间接影响滚动计算。

具体修复步骤 #

1. 修正onLayout的写法

把直接执行函数改成传递函数引用，避免组件刚渲染就触发滚动：

<FlatList
  // ...其他属性
  onLayout={this.scrollNow} // 去掉括号，不要直接调用
/>

2. 确保数据更新后再触发滚动

利用setState的回调函数，在数据真正更新到组件后再调用滚动：
修改_fetchConversation里的setState部分：

this.setState(
  { 
    conversation_arr: this.conversation, 
    show_activty_indicator: false 
  },
  () => {
    // setState完成后再执行滚动
    this.scrollNow();
  }
);

3. 完善scrollNow函数逻辑

增加更严谨的判断，必要时给FlatList一点布局计算的时间：

scrollNow = () => {
  // 确保ref存在、数据已加载
  if (this.flatList1 && this.state.conversation_arr?.length > 0) {
    // 先尝试无动画滚动，避免布局未稳定导致的错误
    this.flatList1.scrollToEnd({ animated: false });
    // 如果需要动画效果，可以加个短延迟确保布局计算完成
    // setTimeout(() => {
    //   this.flatList1.scrollToEnd({ animated: true });
    // }, 100);
  }
};

4. 修正_renderItem的参数结构

FlatList的renderItem回调参数是一个对象，需要解构获取item和index：

_renderItem({ item, index }){
  return (
    <Text style={[styles.msg_common]}>
      {item.message_content}
    </Text>
  );
}

5. 可选：用componentDidUpdate监听数据变化

如果后续有消息追加的场景，可以在componentDidUpdate里监听数据变化，自动滚动到底部：

componentDidUpdate(prevProps, prevState) {
  // 当聊天数据更新时，自动滚动到底部
  if (prevState.conversation_arr !== this.state.conversation_arr && this.state.conversation_arr?.length > 0) {
    this.scrollNow();
  }
}

额外注意点 #

• 检查FlatList的marginBottom样式：你设置了marginBottom:85，确保这个值不会导致列表布局被底部输入框遮挡，影响滚动计算。
• 避免使用过时的this.refs：你已经改用了函数式ref（ref={(ref) => { this.flatList1 = ref; }}），这是正确的，建议完全抛弃this.refs写法。

内容的提问来源于stack exchange，提问作者Tahir