Question

大家好，我在React / Redux中重新渲染组件时遇到了问题。我正在使用React-Redux-Firebase插件。我有2个组件“ UserDiet”和“ UserDietClicks”，第一个组件呈现第二个。当我在UserDietClicks中单击“喜欢”按钮时，会将更新的集合发送到firebase，但是仅当我重新加载页面时，喜欢的数目才会更改，wchich太糟糕了。每次单击类似按钮后，我都不会重新渲染该组件。

我的UserDietClick组件

anotherViewModel

我的UserDiet组件

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);

组件重新渲染不适用于Firebase

0 个答案: