Как исправить 'TypeError: null не является объектом (оценка' data [index] ') - PullRequest
Новая
       100

Как исправить 'TypeError: null не является объектом (оценка' data [index] ')

0 голосов
/ 20 марта 2020

В реактивном нативном проекте при переходе на указанный экран c я получаю эту ошибку. но это не указывает c о том, где находится его местоположение. Мое лучшее предположение состоит в том, что это как-то связано с FlatList, который отображается в компоненте экрана. Вот скриншот enter image description here

Я выполняю действие избыточности внутри componentDidMount, на этом же экране, который в конечном итоге заполняет хранилище избыточностей, которое используется в качестве базы данных FlatList. Вот плоский список: 

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

Не уверен, что вообще происходит или где искать. Любой совет приветствуется.

1 Ответ

1 голос
/ 21 марта 2020

Судя по скриншоту, это неправильная строка: 

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

Сначала я проверю, когда вызывается эта функция. Я подозреваю, что вы будете удивлены, когда это произойдет. например, возможно, он стреляет до того, как определено ref. Возможно, он срабатывает до того, как в списке появится какое-либо содержимое.

Обновление:

Запустил приложение fre sh и вставил код плоского списка следующим образом: 

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 до тех пор, пока данные не появятся.

...