Material-UI的Checkbox结合useState、useEffect使用时无法更新怎么办？

问题根因 #

你使用了defaultChecked属性控制Checkbox选中状态，这是React非受控组件的属性，仅在组件首次挂载渲染时生效，后续isLiked状态更新不会触发Checkbox的状态同步，所以会出现p标签正常更新但Checkbox无响应的情况。

解决方案 #

你需要将Checkbox改为受控组件，修改点如下：

• 将Checkbox的defaultChecked属性替换为checked属性，直接绑定isLiked状态
• 新增onChange事件处理函数，用来切换isLiked状态，后续对接后端PUT请求也可以写在该函数中
• 补充useEffect的依赖数组，把判断逻辑用到的userDetails.user、likedUsers加入依赖，避免后续这两个值更新时isLiked无法重新计算

修改后的可复现代码示例

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) {
      setIsLiked(likedUsers.indexOf(user.user_id) !== -1);
    }
  }, [user, likedUsers]); // 补充依赖

  // 新增切换点赞状态的处理函数
  const handleLikeChange = (e) => {
    setIsLiked(e.target.checked);
    // 后续对接后端PUT请求写在这里
  };

  return (
    <>
      <div>
        <div>{user.username}</div>
        <div>
          <FormControlLabel
            control={
              <Checkbox
                icon={<FavoriteBorder />}
                checkedIcon={<Favorite />}
                name="checkedH"
                checked={isLiked} // 替换defaultChecked为checked
                onChange={handleLikeChange} // 新增onChange
              />
            }
          />
          {likedUsers.length}
        </div>
        {isLiked ? <p>liked</p> : <p>not liked</p>}

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

export default Post;

业务代码修改版

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){
            setIsLiked(likedUsers.indexOf(userDetails.user.user_id) !== -1)           
        }
    },[userDetails.user, likedUsers]) // 补充依赖

    const handleLikeChange = (e) => {
        setIsLiked(e.target.checked);
        // 后续写PUT请求逻辑
    }

    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"
                                checked={isLiked} // 替换defaultChecked为checked
                                onChange={handleLikeChange} // 新增onChange
                            />}
                    />{likedUsers.length}
                </div>
                <Commentlist comments={comments} />
                {isLiked ? <p>liked</p> : <p>not liked</p>}
                
                <hr />
            </div>
        </>
    )
}

export default Post

内容的提问来源于stack exchange，提问作者cyt