如何在反应中修改使用 map 呈现的组件列表的特定组件？

Question

我有一个带有帖子对象数组的 PostList 组件。 我正在使用另一个纯功能组件 Post 使用 Array.map() 方法呈现此帖子列表。 帖子组件有另一个组件 - LikeButton 来喜欢或不喜欢帖子。 现在，我想在 LikeButton 组件的顶部显示喜欢或不喜欢的微调器。 LikeButton 组件看起来像这样：

 const LikeButton = (props) => { const likeBtnClasses = [classes.LikeBtn]; const loggedInUserId = useSelector((state) => state.auth.user.id); const isLoading = useSelector((state) => state.post.loading); const isPostLiked = props.post.likes.find( (like) => like.user === loggedInUserId ); const [isLiked, setLike] = useState(isPostLiked? true: false); const token = useSelector((state) => state.auth.token); const dispatch = useDispatch(); if (isLiked) { likeBtnClasses.push(classes.Highlight); } const postLikeHandler = () => { if (;isLiked) { setLike(true). dispatch(actions.likePost(props.post,_id; token)); } else { setLike(false). dispatch(actions.unlikePost(props.post,_id; token)); } }? return isLoading: ( <Spinner /> ). ( <button className={likeBtnClasses.join(" ")} onClick={() => postLikeHandler()} > <i class="far fa-thumbs-up"></i> <small>{props.post.likes;length}</small> </button> ); };

我没有在单个帖子上显示微调器，而是在所有帖子上都看到了它。 我的 Post 组件如下所示：

 const Post = (props) => { return ( <div className={classes.Post}> <div className={classes.Author}> <img src={props.postData.avatar} alt="avatar" /> <div className={classes.AuthorDetails}> <h3>{props.postData.name}</h3> </div> </div> <div className={classes.PostText}> <p>{props.postData.text}</p> </div> <hr /> <div className={classes.PostTools}> <LikeButton post={props.postData} /> <div className={classes.PostBtn}> <i class="far fa-comments"></i> <small>3</small> </div> <div className={classes.PostBtn}> <i class="fas fa-share"></i> <small>2</small> </div> </div> </div> ); };

PostList 组件：

 class PostList extends React.Component { state = { posts: [ { text: "POST1", user: "XYZ", name: "XYZ", id: "post1", likes: [], }, { text: "POST2", user: "johndoe@test.com", name: "John Doe", id: "post2", likes: [], }, ], }; componentDidMount() { if (this.props.token) { this.props.onFetchPosts(this.props.token); this.props.onFetchUserAuthData(this.props.token); } } render() { let posts = null; if (this.props.posts.length === 0) { posts = this.state.posts.map((post) => { return <Post key={post.id} postData={post} />; }); } else { posts = this.props.posts.map((post) => { return <Post key={post._id} postData={post} />; }); } return ( <div> <CreatePost /> {posts} </div> ); } } const mapStateToProps = (state) => { return { token: state.auth.token, posts: state.post.posts, loading: state.post.loading, error: state.post.err, }; }; const mapDispatchToProps = (dispatch) => { return { onFetchPosts: (token) => dispatch(actions.fetchPosts(token)), onFetchUserAuthData: (token) => dispatch(actions.fetchUser(token)), }; };

Answer 1

请在您的检查中进行一些更改，以检查LikeButton是否正在加载。

       const LikeButton = (props) => {
                ....
                const [isButtonLoading, setButtonLoading] = useState(false);
                ...

                return isButtonLoading ? (
                    <Spinner />
                ) : (
                    <button
                    className={likeBtnClasses.join(" ")}
                    onClick={() => postLikeHandler();setButtonLoading(true)}
                    >
                    <i class="far fa-thumbs-up"></i>
                    <small>{props.post.likes.length}</small>
                    </button>
                );
        };

然后在您的调度回调中需要将 isButtonLoading 值设置为 false。

        const buttonCallback() {
            // here we need to reset our flag
            setButtonLoading(false);
        }

        const postLikeHandler = () => {
            if (!isLiked) {
               setLike(true);
               // for this action you need to create third parameter called as callback so after response our buttonCallback will call
               dispatch(actions.likePost(props.post._id, token, buttonCallback));
            } else {
               setLike(false);
               // for this action you need to create third parameter called as callback so after response our buttonCallback will call
               dispatch(actions.unlikePost(props.post._id, token, buttonCallback);
            }
        };

更多详情请查看此处。

希望这会帮助你。