TypeError: undefined is not an object(evalating '_props.listMessages Query.list Messages') in React

Posted 2023-03-08

【中文标题】TypeError: undefined is not an object(evalating \'_props.listMessages Query.list Messages\') in React Native

【英文标题】：TypeError: undefined is not an object(evaluating '_props.listMessagesQuery.listMessages') in ReactNativeTypeError: undefined is not an object(evalating '_props.listMessages Query.list Messages') in React Native

【发布时间】：2018-11-13 12:25:52

【问题描述】：

我是 react-native 和 aws appsync 的新手。我们正在尝试显示消息列表。但是当我运行 react-native run-android 时，它会抛出一个错误提示

TypeError: undefined is not an object(评估 '_props.listMessagesQuery.listMessages')

[下面是错误的截图url] https://i.stack.imgur.com/b1Wlj.png

聊天.js

import React,Component from 'react';
import ChatInput from './ChatInput';
import ChatMessages from './ChatMessages';
import  graphql, compose  from 'react-apollo';
import listMessages from './querys/listMessages';
import createMessage from './querys/createMessage';
import gql from 'graphql-tag';
import 
    Platform,
    StyleSheet,
    Text,
    View,
    scrollIntoView
   from 'react-native';

class Chat extends Component 

  state = 
    message: '',
  

    render() 
      return (
        <View className='Chat'>
          <ChatMessages
            messages=this.props.listMessagesQuery.listMessages || []
            endRef=this._endRef
          />
          <ChatInput
            message=this.state.message
            onTextInput=(message) => this.setState(message)
            onResetText=() => this.setState(message: '')
            onSend=this._onSend
          />
        </View>
      );
    

    _onSend = () => 
      //console.log(`Send: $this.state.message`)
      this.props.createMessageMutation(
        variables: 
          text: this.state.message,
          sentById: this.props.userId
        
      )
    


    /*
     * AUTO SCROLLING
     */

    _endRef = (element) => 
      this.endRef = element
    

    componentDidUpdate(prevProps) 
      // scroll down with every new message
      if (prevProps.listMessagesQuery.listMessages !== this.props.listMessagesQuery.listMessages && this.endRef) 
        this.endRef.scrollIntoView()
      
    

  
export default compose(
    graphql(listMessages, 
        options: 
            fetchPolicy: 'cache-and-network'
        ,
        props: (props) => (
            posts: props.listMessagesQuery.listMessages && props.listMessagesQuery.listMessages.Message,
        )
    ))(Chat)

App.js

import React, Component from 'react';
import * as AWS from 'aws-sdk';
import 
  Platform,
  StyleSheet,
  Text,
  View
 from 'react-native';
import gql  from 'graphql-tag';
import  graphql,compose from 'react-apollo';
import generateStupidName from 'sillyname';
import localStorage from 'react-native-sync-localstorage';
import Chat from './Chat';
import  Async  from 'react-async-await';
import createPerson from './querys/createPerson';

const CHAT_USER_NAME_KEY = 'CHAT_USER_NAME'
const CHAT_USER_ID_KEY = 'CHAT_USER_ID'

class App extends Component 
    async componentDidMount() 
      let name = localStorage.getItem(CHAT_USER_NAME_KEY)
      if (!name) 
                name = generateStupidName()
                const result = await this.props.createPersonMutation(
                  variables:  name 
             )
        localStorage.setItem(CHAT_USER_NAME_KEY, result.data.createPerson.name);
        localStorage.setItem(CHAT_USER_ID_KEY, result.data.createPerson.id);
      
    
  render() 
    const name = localStorage.getItem(CHAT_USER_NAME_KEY)
    const userId = localStorage.getItem(CHAT_USER_ID_KEY)
    return (
      <View style=styles.container>
         <Chat name=name userId=userId />
      </View>
    );
  

// const createPerson =gql`
// mutation createPerson($name:String!)
//   createPerson(input :
//     name : $name
//   )
//     id
//     name
//   
// 
// `
// export default graphql(createPerson,name:'createPersonMutation')(App)
export default compose(
  graphql(createPerson, name:'createPersonMutation'))(App)

const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

我不理解这个错误请帮助我。谢谢！提前

【参考方案1】：

请检查格式

this.props.listMessagesQuery.listMessages

由于错误定义了您传递的特定数据或道具不是对象。

console.log(this.props.listMessagesQuery.listMessages)

检查您是否在当前格式中找到它。如果您没有找到任何东西，请与您分享此 console.log 结果。希望对你有帮助

【参考方案2】：

您没有将 listMessagesQuery.listMessages 作为道具发送到 Chat.js 组件，您只是将 name 和 userId 作为道具发送到 Chat 组件

您在 App.js 中的现有代码

<Chat name=name userId=userId />

你需要发送

<Chat name=name userId=userId listMessagesQuery=/>

【讨论】：

感谢您抽出宝贵时间@Sathvik Nasani。正如您在上面所说的 **listMessagesQuery= ** 我无法将空表达式发送到聊天组件。如果我错了，你能建议我纠正我吗？谢谢！！

嗨@bharathkuppala 你从哪里得到这个listMessagesQuery 对象？你能提供完整的细节吗

从'graphql-tag'导入gql； export default gql` query listMessagesQuery listMessages id text createdAt sentBy id name `;