Invariant Violation 试图让帧超出范围索引 NaN答案

【问题标题】：Invariant Violation tried to get frame out of range index NaNInvariant Violation 试图让帧超出范围索引 NaN
【发布时间】：2019-01-25 21:52:17
【问题描述】：

我正在运行来自Even Bacon 的react-native 聊天应用示例并遇到frame out of range NaN 错误：

这里是 package.json：

 "firebase": "^5.8.0",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-elements": "^0.19.1",
    "react-native-gesture-handler": "^1.0.15",
    "react-native-gifted-chat": "^0.7.0",
    "react-navigation": "^3.0.9"

有一些关于不同情况下的错误的在线帖子。错误指向 Chat.js 中的GiftedChat。而且我不知道是什么导致了错误。

import React, { Component} from 'react';
import {View, StyleSheet } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import Fire from '../Fire';

class Chat extends React.Component {
    static navigationOptions = ({ navigation}) => ({
        title: (navigation.state.params || {}).name || 'Chat!',
    });

    state = {
        messages: {},
    };

    componentDidMount() {
        Fire.shared.on(message =>
              this.setState(previousState => ({
                messages: GiftedChat.append(previousState.messages, message),
              }))
        );
    }

    componentWillUnmount() {
      Fire.shared.off();
    }

    get user() {
      // return our name and our UID for GiftedChat to parse
      return {
          name: this.props.navigation.state.params.name,
          _id: Fire.shared.uid,
      };
    }

    render() {
        return (
            <GiftedChat   <<<<==this is line:37
              messages={this.state.messages}
              onSend={Fire.shared.send}
              user={this.user}
            /> 
        );
    }
}

const styles = StyleSheet.create({});



export default Chat;

【问题讨论】：

标签： firebase react-native

【解决方案1】：

看起来错误处于您的初始消息状态。

您已将您的状态定义为

state = { 
  messages: {} 
}

消息应该被定义为一个数组，所以将你的初始状态更新为

state = { 
  messages: []
}

来自文档

messages（数组）- 要显示的消息

https://github.com/FaridSafi/react-native-gifted-chat#props

【讨论】：