代码之家  ›  专栏  ›  技术社区  ›  user938363

不变冲突试图使帧超出索引NaN的范围

  •  0
  • user938363  · 技术社区  · 6 年前

    我正在跑步 react-native 聊天应用示例 Even Bacon 跑进 frame out of range NaN 错误:

    enter image description here

    这里是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"
    

    有一些关于不同情况下的错误的在线文章。错误指向 GiftedChat 在Chat.js。我也不知道是什么导致了这个错误。

    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;
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Andrew    6 年前

    对于消息,错误似乎处于初始状态。

    您已将您的状态定义为

    state = { 
      messages: {} 
    }
    

    消息应定义为数组,因此将初始状态更新为

    state = { 
      messages: []
    }
    

    从文档中

    • 信息 (数组)-要显示的消息

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