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

Question

我是 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,
  },
});

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

Answer 1

请检查格式

this.props.listMessagesQuery.listMessages

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

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

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

Answer 2

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

您在 App.js 中的现有代码

<Chat name={name} userId={userId} />

你需要发送

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