0

estoy haciendo una aplicacion y a traves de un boton se dispara un evento onClick que llama a la funcion loadMoreBooks -> es en esta funcion en donde se llama al servicio el servicio es una querie que tengo en el archivo queries.js en donde esta el servicio en donde se pasan los argumentos pero de alguna forma recibo un error loadMoreBooks no es una funcion.

En el componente BookHome:

    class BookHome extends React.Component {
        
        constructor(props) {
            super(props);
            
            this.state = {
                books: []
            }
        
        }

        static getDerivedStateFromProps(props, state) {
            const { bookList: {bookList} } = props;
            if(bookList) {
                return {
                    books: bookList
                }
            } else {
                return null;
            }
        }

        loadMoreBooks = async() => {
            const { loadMoreBooks } = this.props;
            const { books } = this.state;
            let lastBookId = books[books.length - 1].id;
            
            const variables = {
                bookId: lastBookId ? lastBookId : ''
            }

            try {
                const response = await loadMoreBooks({variables});
            } catch(err) {
                console.log(err.message);
            }
        }

        render() {
            const { books } = this.state;
            return(
                <div className="books-home-container">
                    <div className="books-header-home"></div>
                    <SearchBar />
                    <Books books={books}/>
                    <LoadMoreButton loadMoreBooks={e => this.loadMoreBooks()}/>
                </div>
            );
        }
    }

    export default compose(
        graphql(queries.bookList, { name: 'bookList' }),
        graphql(queries.loadMoreBooks, { name: 'loadMoreBooks' })
    )(BookHome);

El archivo querie es el siguiente: import gql from 'graphql-tag';

    const queries = {
        bookList: gql`
        query bookList {
            bookList {
                id
                coverImage
                title
                description
                author
                rating
            }
        }
        `,
        loadMoreBooks: gql`
        query loadMoreBooks($bookId: String!) {
            loadMoreBooks(bookId: $bookId) {
                id
                coverImage
                author
                title
            }
        }
        `,

    }

    export default queries;

3 respuestas 3

1

Cuando define un componente usando una clase ES6 , un patrón común es que un controlador de eventos sea un método en la clase, debes llamar a bind en el constructor para que no te de un error al usar un método:

 constructor(props) {
     super(props);   
     this.state = {
         books: []
     }
 this.loadMoreBooks = this.loadMoreBooks.bind(this)
 }

te aconsejo que uses los métodos como tal, y si es necesitas utilizar async/await en un método simplemente agrega el async antes de el nombre del método

async handle(){
//aqui la lógica del método
}
2
  • No uso bind en el constructor, en vez de ello utilizo arrow functions, lo que pasa es que cuando el componente va renderizando llama al servicio(siendo que deberia llamar al servicio cuando se dispara el evento onClick).
    – Richi
    el 10 mar. 2021 a las 0:43
  • entonces solamente agregas la funcion al parametro, de esta forma <LoadMoreButton loadMoreBooks={this.loadMoreBooks}/> yo creo que con eso basta
    – Enzo
    el 10 mar. 2021 a las 5:05
0

En el onClick intenta poner <Componente onClick={()=>this.loadMoreBooks.bind()}/> o bien solo onClick={this.loadMoreBooks} y listo

0

RESUELTO

Luego de debuggear el codigo en varias ocaciones, me di cuenta que estaba llamando cuando se renderizaba el componente al servicio, y este fallaba en el llamado porque espera que se le pase como argumento un Integer.

La solucion fue, agregar la variable client que se exporta desde index y hacer un llamado a la querie a partir de esta por lo que, estaria totalmente controlado el llamado por el evento onClick que llama a la funcion. Des esta forma:

      loadMoreBooks = async(e) => {
            const { books } = this.state;
            let lastBookId = books[books.length - 1].id;

            try {
                const resp = await client.query({
                    query: queries.getMoreBooks,
                    variables: { bookId: parseInt(lastBookId) },
                    fetchPolicy: 'network-only'
                });
            } catch(err) {
                console.log(err.message);
            }
        }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.