时间戳

首页 > 解决方案 > 为什么我的复选框（Material-UI）没有更新？我正在使用 useState、useEffect 以及 Material-UI 中的 Checkbox

reactjs - 为什么我的复选框（Material-UI）没有更新？我正在使用 useState、useEffect 以及 Material-UI 中的 Checkbox

问题描述

为什么我的复选框（Material-UI）没有更新？我正在使用 useState、useEffect 以及 Material-UI 中的 Checkbox。这特别奇怪，因为{isLiked ? <p>liked</p> : <p>not liked</p>}更新正确没有任何问题，但只是复选框不起作用。我正在尝试使用 defaultChecked 属性更新 Checkbox 的选中状态。当我直接设置 isLiked Boolean 时它起作用了，但是一旦我尝试使用 useState 和 useEffect，它就停止了工作。这是我的代码：

const Post = ({ createdOn, text, username, comments, likedUsers }) => {
    const d = new Date(createdOn);
    const userDetails = useAuthState();

    const [isLiked, setIsLiked] = React.useState(false);
    React.useEffect(() => {
        if (userDetails.user){
            if (likedUsers.indexOf(userDetails.user.user_id) !== -1)
                setIsLiked(true)              
        }
    },[])
    return (
        <>
            <div>
                <h3>{text}</h3>
               
                <div>
                    <span>{d.toLocaleDateString()}</span>&nbsp;<span>{d.toLocaleTimeString()}</span>
                </div>
                <div>{username}</div>
                <div>
                    <FormControlLabel
                        control={
                            <Checkbox
                                icon={<FavoriteBorder />}
                                checkedIcon={<Favorite />}
                                name="checkedH"
                                defaultChecked={isLiked}
                                
                            />}
                    />{likedUsers.length}
                </div>
                <Commentlist comments={comments} />
                {isLiked ? <p>liked</p> : <p>not liked</p>}
                
                <hr />
            </div>
        </>
    )
}

export default Post

提前致谢。

这是一个类似的代码片段，它在没有外部依赖项的情况下重现了该问题：

import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Favorite from "@material-ui/icons/Favorite";
import FavoriteBorder from "@material-ui/icons/FavoriteBorder";

const Post = () => {
  const likedUsers = [1, 2, 3, 4];
  const username = "user1";
  const user = {
    user_id: 1,
    username
  };
  const [isLiked, setIsLiked] = React.useState(false);
  React.useEffect(() => {
    if (user) {
      if (likedUsers.indexOf(user.user_id) !== -1) setIsLiked(true);
    }
  }, []);
  return (
    <>
      <div>
        <div>{user.username}</div>
        <div>
          <FormControlLabel
            control={
              <Checkbox
                icon={<FavoriteBorder />}
                checkedIcon={<Favorite />}
                name="checkedH"
                defaultChecked={isLiked}
              />
            }
          />
          {likedUsers.length}
        </div>
        {isLiked ? <p>liked</p> : <p>not liked</p>}

        <hr />
      </div>
    </>
  );
};

export default Post;

当页面首次加载时，我会比较当前用户 id 以查看它是否在每个帖子的“likedUsers”数组中，以确定用户是否喜欢该帖子，并且 heart Checkbox 将显示此初始状态。每次用户单击心脏时，它都会向后端发送一个放置请求以切换数据库中的状态。“likedUsers”数组是页面加载时获取的每个帖子的属性，并被传递给 Post 组件。不过，我还没有对 put 请求部分进行编码，因此问题中没有显示。

标签： reactjsreact-hooksmaterial-ui

解决方案

我不明白你为什么想要 useEffect 但你可以试试这个：

Checkbox需要checked属性才能活跃。以及执行此操作的事件处理程序onChange。

const handleCheckbox = () => {
    setIsLiked(!isLiked);
  };

<FormControlLabel
            control={
              <Checkbox
                icon={<FavoriteBorder />}
                checkedIcon={<Favorite />}
                name="checkedH"
                checked={isLiked}
                onChange={handleCheckbox}
              />
            }
          />

请在此处查看示例

推荐阅读