W projekcie reagowania, podczas nawigacji na określony ekran, otrzymuję ten błąd. Ale nie jest to konkretne, gdzie jest jego lokalizacja. Moim najlepszym odczuciem jest to, że ma coś wspólnego z llistą, która jest renderowana w komponencie ekranu. Heres acreenshot Wpisz opis obrazu tutaj

Wykonuję akcję Redux wewnątrz componentDidMount, na tym samym ekranie, który ostatecznie wypełnia sklep Redux, który jest używany jako rekordu flatlist's Data. Oto płaski:

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

        }}
    />

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

Nie jestem pewien, co się dzieje lub gdzie się spojrzeć. Wszelkie porady są doceniane.

0
Jim 20 marzec 2020, 01:35

1 odpowiedź

Najlepsza odpowiedź

Na podstawie zrzutu ekranu wydaje się, że jest to linia obrażająca:

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

Najpierw sprawdziłbym, kiedy ta funkcja jest nazywana. Podejrzewam, że będziesz zaskoczony, kiedy się dzieje. na przykład Być może zostanie zdefiniowany przed ref. Być może strzelanie przed listą ma jakiekolwiek treści.

Aktualizacja:

Obrócił świeżą aplikację i wkleiłem swój kod mieszkania

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

Zauważ, że zastąpiłem

<FlatList
    data={this.props.messages}

Z

<FlatList
    data={null}

To odtwarza to, co widzisz. Powiedziałbym więc, że twój początkowy stan składnika przechodzi w danych zerowych do Twojego mieszkania i powoduje problem. Wystarczy sprawdzić brakujące dane przed renderowaniem mieszkania i {x0}}, aż dane są tam.

1
Benjamin Godlove 21 marzec 2020, 20:19