Рендеринг компонентов не работает с FireBase - PullRequest
0 голосов
/ 07 декабря 2018

Здравствуйте, ребята, у меня проблема с перерисовкой моего компонента в React / Redux.Я использую аддон React-Redux-Firebase.У меня есть 2 компонента "UserDiet" и "UserDietClicks", первый компонент рендерит второй.Когда я нажимаю кнопку «Мне нравится» в UserDietClicks, она отправляет обновленную коллекцию в firebase, но количество лайков меняется только при перезагрузке страницы, что ужасно.Я не буду перерисовывать компонент после каждого нажатия кнопки «Нравится».

Мой компонент UserDietClick

class UserDietClick extends Component {
    likeDiet = (diet) =>{
        const newArr = [...this.props.dietID.idDiet.likes, this.props.profile.basicInfo.profileDisplayName ]
        const updateLikes = {...diet, likes: newArr}
        this.props.firestore.update({ collection: 'diets', doc: `${diet.id}`,}, updateLikes )


    }

    closeWindow =()=>{
        this.props.sendId('')
    }


    render() {
        const {dietID} = this.props
        return (
            <div className="UserDietContainer">
                <i onClick={this.closeWindow} style={{alignSelf: 'flex-start',marginLeft: 'auto', cursor:'pointer', fontSize: '35px'}}className="fas fa-times"></i>

                <span className="user-diet-name">{dietID.idDiet.name}</span>
                <ol>{dietID.idDiet.arr.map(el=>
                    <li style={{fontSize: '20px', color: "#393f4d"}}>{el.food}  <span className="food-calories">Calories: {el.calories}</span> </li>)}</ol>
                <p style={{fontSize: '20px', color: "#393f4d"}}>{dietID.idDiet.description}</p>
                <span>Added by: <span style={{fontWeight: '500', fontFamily: 'open Sans'}}>{dietID.idDiet.profileName}</span></span>
                <div style={{
                    width: '100px', height: '100px',
                    backgroundPosition:"center",
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: '110px',
                    backgroundImage: `url(${dietID.idDiet.profileAvatar})`,
                    borderRadius: '50%',
                }}></div>
                <div style={{display: 'flex', paddingTop: '20px'}}> <span className="food-calories">Likes: {dietID.idDiet.likes.length}</span>
                    <i className="far fa-thumbs-up user-diet-like" onClick={this.likeDiet.bind(this, dietID.idDiet)}></i></div>


            </div>
        );
    }
}

UserDietClick.propTypes = {};

export default compose(firestoreConnect([{ collection: 'diets', }]),
    connect((state)=>({diets: state.firestore.ordered.diets,
        profile: state.firebase.profile,
    }), { sendId }))(UserDietClick);

Мой компонент UserDiet

class UsersDiets extends Component {


    render() {

        const {diets, dietID} = this.props

        return (
            <div className="container">
            <div className="card" style={{display: 'flex', justifyContent: 'center', flexWrap: 'wrap'}}>
                {dietID.idDiet.edit ? <UserDietClick dietID={dietID} /> : null}
                {diets !== undefined ? diets.map(el=> <OneUserDiet key={el.id}
                                                                   dietName={el.name}
                                                                   totalCalories={el.totalCalories}
                                                                   description={el.description}
                                                                   profileName={el.profileName}
                                                                   likes={el.likes}
                                                                   profileAvatar={el.profileAvatar}
                                                                   whole={el}
                />) : []}
            </div>
            </div>
        );
    }
}

UsersDiets.propTypes = {};

export default compose(firestoreConnect([{ collection: 'diets', }]),
    connect((state)=>({diets: state.firestore.ordered.diets,
                        dietID: state.idRed,
        profile: state.firebase.profile,
    }), { sendId }))(UsersDiets);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...