如何修复'TypeError：null不是对象（评估'data [index]'）答案

【问题标题】：How to fix 'TypeError: null is not an object (evaluating 'data[index]')如何修复'TypeError：null不是对象（评估'data [index]'）
【发布时间】：2020-03-19 22:35:19
【问题描述】：

在 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] });
    }
  });
 }

完全不知道发生了什么或去哪里看。任何建议表示赞赏。

【问题讨论】：

标签： reactjs react-native react-redux react-native-flatlist

【解决方案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 之前检查丢失的数据，直到数据存在。

【讨论】：