Реактивная функция не вызывается обратно в render ()

Question

Я создаю поисковое приложение mov ie с React, Redux и Firebase. Я создал функцию (isPresentMov ie), чтобы проверить, был ли mov ie в Fb или нет, и я ожидаю, что будет возвращена кнопка «Add Mov ie» / «Remove Mov ie» в зависимости от результата проверки.

import React, { Component } from 'react'
import { connect } from 'react-redux';
import {  addFav, removeFav, getDetail } from '../../store/actions/getDetailAction'
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux'


const button = {
    marginLeft:'10px',
    marginRight:'10px',
}

export class Favorite extends Component {

        handleRemove = (e) => {
            e.preventDefault();
            this.props.removeFav()
        };

        handleAdd = (e) => {
            e.preventDefault();
            this.props.addFav()
        }

    isPresentMovie = () => {
        const validation = this.props.favorites.filter(favorite => favorite.authorId == this.props.auth.uid).find(favorite => favorite.imdbID == this.props.movie.imdbID); 

        if(validation == undefined){
            return (<button type="submit" className="btn btn-danger btn-bg mt-1" onClick={this.handleRemove} style={button}>Remove From Favorite</button>);
        } else {
            return (<button type="submit" className="btn btn-primary btn-bg mt-1" onClick={this.handleAdd} style={button}>Add To Favorite</button>);
        }
    }

    render() {
        return (
            <div className="d-flex">
               {this.isPresentMovie()}  
            </div>
        )
    }
}

const mapStateToProps = state => ({
    favorites: state.firestore.ordered.favorites,
    auth: state.firebase.auth,
    movie: state.movie.movie,
})

export default compose(
    connect(mapStateToProps,{ addFav, removeFav, getDetail }),
    firestoreConnect([
        { collection: 'favorites' }
    ])
)(Favorite);

Проблема 1: Несмотря на то, что я использую функцию стрелки, функция не вызывается в render (). Сообщение об ошибке «TypeError: Невозможно прочитать свойство« filter »из undefined "Пробовал с .bind (this), результат был тот же.

Проблема 2: я изначально подозревал, что он не был правильно отрендерен, но если я не использовал какие-либо методы внутри функции, он отображался правильно.

Если это из-за методов, есть ли альтернативный способ проверки данных в Fb по данным API? Или другим способом я могу проверить данные на основе созданной мной функции?

Answer 1

Свойство favorites не определено, возможно, потому, что данные находятся в обработке поступающих из базы данных при начальной загрузке. Другая проблема, с которой вы столкнетесь, состоит в том, что ваши кнопки должны иметь опору key. Пока избранное не определено, вы можете просто сделать ноль из isPresent, попробуйте это:

isPresentMovie = () => {
  if (!Array.isArray(this.props.favorites)) {
    return null;
  }

  const validation = this.props.favorites.filter(favorite => favorite.authorId == this.props.auth.uid).find(favorite => favorite.imdbID == this.props.movie.imdbID); 

  if(validation == undefined){
    return (<button key="no-validation" type="submit" className="btn btn-danger btn-bg mt-1" onClick={this.handleRemove} style={button}>Remove From Favorite</button>);
  } else {
    return (<button key="validation" type="submit" className="btn btn-primary btn-bg mt-1" onClick={this.handleAdd} style={button}>Add To Favorite</button>);
  }
}

Answer 2

Проблема 1: Несмотря на то, что я использую функцию стрелки, функция не вызывается в render (). Ошибка с сообщением «TypeError: Невозможно прочитать свойство 'filter' of undefined" Попытка с помощью .bind (this), результат был тот же.

Тот факт, что он показывает эту ошибку, означает, что он действительно вызывает вашу isPresentMovie функцию. Но проблема в том, что this.props.favorites не определено.

Попробуйте проверить перед вызовом filter, ie

const validation = this.props.favorites && this.props.favorites.filter(favorite => favorite.authorId == this.props.auth.uid).find(favorite => favorite.imdbID == this.props.movie.imdbID);