Question

我正在学习Udemy课程，他们有一个与众不同的按钮，它们彼此分开。我想尝试将它们设置为1个按钮，以便按钮可以在不刷新页面的情况下切换和更新喜欢的次数。

我在功能组件的return（）中有类似的东西

{posts.filter(item => item.user.toString() === user).length > 0 ? (
  <button onClick={e => unlike(_id)}>Unlike</button>
) : (
  <button onClick={e => like(_id)}>Like</button>
)}

此ony会在页面加载后呈现，并且只会根据条件语句呈现Like或Like。用户只能点赞一次，因此，如果用户已经喜欢了帖子，则在页面加载时，它会加载“不同”按钮，如果用户单击“不同”，它将保持“不同”，并且不会刷新视图。

我还要对此进行更新：

{posts.length}

在不刷新页面的情况下如何执行此操作，并且页面将根据用户的操作重新呈现？

actions / post.js

// Like
export const like = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/like/${id}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data }
    });
  } catch (err) {

  }
};

// Unlike
export const unlike = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/unlike/${id}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data }
    });
  } catch (err) {

  }
};

reducers / post.js

import {
  GET_POSTS,
  POST_ERROR,
  UPDATE_LIKES,
  ADD_POST
} from '../actions/types';

const initialState = {
  posts: [],
  post: null,
  loading: true,
  error: {}
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_POSTS:
      return {
        ...state,
        posts: payload,
        loading: false
      };
    case ADD_POST:
      return {
        ...state,
        posts: [...state.posts, payload],
        loading: false
      };
    case POST_ERROR:
      return {
        ...state,
        posts: payload,
        loading: false
      };
    case UPDATE_LIKES:
      return {
        ...state,
        posts: state.posts.map(post =>
          post._id === payload.id
            ? { ...post, likes: payload.likes }
            : post
        ),
        loading: false
      };
    default:
      return state;
  }
}

Answer 1

在不一样的方法中，操作类型为“ UPDATE_LIKE ”，而简化程序则期望“ UPDATE_LIKES ”

您也将更新化简版中的 likes 属性，但要进行渲染，您需要检查 user 属性以进行条件渲染

@Controller
@RequestMapping("/dish")
public class DishViewController { /* ... */ }

@RestController
@RequestMapping("/api/dish")
public class DishAPIController { /* ... */ }

Answer 2

所以我正在做同样的课程，并且想做与您想做的事情相同的事情，并且看到了这个问题，这就是我所做的并且对我有用。我尝试制作像Instagram这样的按钮，如果喜欢的话，心脏会充满红色。

Screenshot of the result

我发送了一个布尔型道具“ liked”，该道具有助于了解登录用户是否喜欢该帖子：

Posts.js

        <div className="posts">
         {posts.map((post) => (
           <PostItem
             key={post._id}
             post={post}
             liked={
               post.likes.filter((like) => like.user === user._id).length > 0
                 ? true
                 : false
             }
           />
         ))}
       </div>

PostItem.js

在这里使用Hooks表示按钮的状态。


        const [like, setLike] = useState(liked);

        <button
          type="button"
          onClick={async (e) => {
            like ? await removeLike(_id) : await addLike(_id);
            setLike(!like);
          }}
          className="btn btn-light"
        >
          {like ? (
            <i className="fas fa-heart like-color"></i>
          ) : (
            <i className="far fa-heart"></i>
          )}{" "}
          <span>{likes.length}</span>
        </button>

ReactJS-使用相同按钮的喜欢和不同-更新而不刷新页面

2 个答案: