TypeError: undefined не является объектом (оценивается как _props.listMessagesQuery.listMessages) в ReactNative - PullRequest
Новая
       14

TypeError: undefined не является объектом (оценивается как _props.listMessagesQuery.listMessages) в ReactNative

0 голосов
/ 04 июня 2018

Я новичок в реакции-нативной и aws appsync.Мы пытаемся отобразить список сообщений. Но когда я запускаю реактив-нативный запуск-android, выдается сообщение об ошибке

TypeError:undefined не является объектом (оценивается как _props.listMessagesQuery.listMessages)

[Ниже приведен URL-адрес скриншота с ошибкой] https://i.stack.imgur.com/b1Wlj.png

Chat.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,
  },
});

Я не понимаю эту ошибку Пожалуйста, помогите мне. Спасибо!заранее

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

вы не отправляете listMessagesQuery.listMessages в качестве реквизита для компонента Chat.js, вы отправляете только имя и userId в качестве реквизита для компонента Chat *

ваш существующий код в App.js 

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

нужно отправить 

<Chat name={name} userId={userId} listMessagesQuery={}/>
0 голосов
/ 04 июня 2018

Пожалуйста, проверьте формат

this.props.listMessagesQuery.listMessages

Поскольку ошибка определила, что определенные данные или реквизиты, которые вы передаете, не являются объектом.

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

проверить, найден ли он в текущем формате.Если вы ничего не нашли, поделитесь этим результатом console.log.Надеюсь, это поможет вам

...