How to fix 'TypeError: null is not an object (evaluating 'data[index]')

Question

在 react-native 项目中，当导航到特定屏幕时，出现此错误。但它并没有具体说明它的位置。我最好的猜测是它与在屏幕组件中呈现的 FlatList 有关。这是截图

我在同一屏幕中 componentDidMount 中执行了一个 redux 操作，它最终填充了用作 FlatList 数据属性的 redux 存储。这是平面列表：

<FlatList
    data={this.props.messages}
    style={{ paddingTop: 10, paddingBottom: 35 }}
    ref={'list'}
    onContentSizeChange={() => this.refs.list.scrollToEnd()}
    keyExtractor={(item) => {
      return (
        item.toString() +
        new Date().getTime().toString() +
        Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
      );
     }}
    renderItem={({ item, index }) => {
        if (item.content.type == 'msg') {
            if (this.props.role == 'a') {
              return (
                    <Components.ChatMessage
                        isSender={item.sender == this.props.uid ? true : false}
                        message={item.content.data}
                        read={item.read}
                        time={item.time}
                        onPress={() =>
                            this.props.readMsg({
                                id: this.props.uid,
                                role: this.props.role,
                                convoId: this.props.navigation.state.params.convoId },
                                item.docId,
                        this.props.navigation.state.params.uid
                            )}
                     />
                );
            } 

        }}
    />

componentDidMount() 看起来像：

componentDidMount () {
  this.props.getMessages(this.state.ownerConvoId).then((success) => {
    if (this.state.ownerConvoId == this.props.messages[0]['userConvos'][0]) {
      this.setState({ withConvoId: this.props.messages[0]['userConvos'][1] });
    } else {
      this.setState({ withConvoId: this.props.messages[0]['userConvos'][0] });
    }
  });
 }

完全不确定发生了什么或在哪里查看。任何建议表示赞赏。

Answer 1

根据屏幕截图，这似乎是有问题的行：

onContentSizeChange={() => this.refs.list.scrollToEnd()}

我会首先检查该函数何时被调用。我猜你会在它发生时感到惊讶。例如也许它在定义 ref 之前就开始了。也许它在列表有任何内容之前触发。

更新：

启动一个新的应用程序并像这样粘贴您的平面列表代码

import React, { Component } from "react";
import { FlatList } from "react-native";

export default class BadFlatList extends Component {
    constructor(props) {
        super(props)
    };

    render() {
        return (
            <FlatList
                data={null}
                style={{ paddingTop: 10, paddingBottom: 35 }}
                ref={'list'}
                onContentSizeChange={() => this.refs.list.scrollToEnd()}
                keyExtractor={(item) => {
                  return (
                    item.toString() +
                    new Date().getTime().toString() +
                    Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
                  );
                 }}
                renderItem={({ item, index }) => {
                    if (item.content.type == 'msg') {
                        if (this.props.role == 'a') {
                            return (
                                <Components.ChatMessage
                                    isSender={item.sender == this.props.uid ? true : false}
                                    message={item.content.data}
                                    read={item.read}
                                    time={item.time}
                                    onPress={() =>
                                        this.props.readMsg({
                                            id: this.props.uid,
                                            role: this.props.role,
                                            convoId: this.props.navigation.state.params.convoId },
                                            item.docId,
                                            this.props.navigation.state.params.uid)} />
                            );
                        } 
                    }
                }} />
        );
    }
};

注意我替换了你的

<FlatList
    data={this.props.messages}

和

<FlatList
    data={null}

这重现了您所看到的。所以我会说你的初始组件状态正在将空数据传递给你的 FlatList 并导致问题。在渲染 FlatList 和 return null 之前检查丢失的数据，直到数据存在。

How to fix 'TypeError: null is not an object (evaluating 'data[index]')

How to fix 'TypeError: null is not an object (evaluating 'data[index]')

reactjs

react-native

react-redux

react-native-flatlist