React编辑帖子时如何设置对应分类复选框选中、其余未选中

修复方案 #

核心问题定位

1. 复选框未绑定checked属性，无法自动回显帖子已关联的分类
2. useEffect依赖数组错误包含了categories状态，每次修改分类都会触发useEffect重执行，将已选分类重置为帖子初始关联值，导致点击无响应
3. 代码存在缺失变量：userInfo、title、desc、img未定义，会引发额外报错

完整修复代码

import React, { useEffect, useState } from 'react';
import { Button, Container, Form } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import { listCategory } from '../actions/categoryActions';
import { listPostDetails, updatePost } from '../actions/postActions';

const EditPost = ({ history, match }) => {
  const postId = match.params.id;

  // 补充缺失的帖子相关状态，可根据实际业务字段调整
  const [title, setTitle] = useState('');
  const [desc, setDesc] = useState('');
  const [img, setImg] = useState('');
  const [categories, setCategories] = useState([]);

  const dispatch = useDispatch();

  const categoryList = useSelector((state) => state.categoryList);
  const { categories: cateList } = categoryList;

  const postDetails = useSelector((state) => state.postDetails);
  const { post } = postDetails;
  // 补充userInfo的取值逻辑，从你自己的redux用户登录模块取对应字段即可
  const userInfo = useSelector(state => state.userLogin.userInfo)

  useEffect(() => {
    if (!userInfo) {
      history.push('/login');
    }

    dispatch(listCategory());

    if (!post || post._id !== postId) {
      dispatch(listPostDetails(postId));
    } else {
      setTitle(post.title)
      setDesc(post.desc)
      setImg(post.img)
      // 如果你的post.categories存的是分类id数组，这里改成post.categories.map(item => item._id)，后续匹配逻辑也对应改id即可
      setCategories(post.categories.map(item => item.name));
    }
  // 移除categories依赖，避免修改分类时触发循环重置
  }, [dispatch, history, userInfo, post, postId]);

  const submitHandler = (e) => {
    e.preventDefault();
    // 如果后台需要接收分类id，这里把categories转换成id数组再提交即可
    dispatch(updatePost(title, desc, img, categories));
    history.push('/my_posts');
  };

  return (
    <div className="createPost mt-4 py-4">
      <ToastContainer />
      <Container>
        <h2>EDIT POST</h2>
        <Form onSubmit={submitHandler}>
          {/* 原有title、描述、封面图等表单项自行补充即可 */}
          <Form.Group controlId="category" className="mb-2">
            <Form.Label>Select Categories</Form.Label>
            <br />
            {cateList?.map((cate) => (
              <Form.Check
                inline
                key={cate._id}
                type="checkbox"
                label={cate.name}
                // 新增checked属性，判断当前分类是否在已选列表中
                checked={categories.includes(cate.name)}
                onChange={(e) => {
                  if (e.target.checked) {
                    setCategories([...categories, cate.name]);
                  } else {
                    setCategories(
                      categories?.filter((cat) => cat !== cate.name)
                    );
                  }
                }}
              />
            ))}
          </Form.Group>
          <Button
            type="submit"
            variant="success"
            style={{ letterSpacing: '2px', fontWeight: 'bold' }}>
            提交修改
          </Button>
        </Form>
      </Container>
    </div>
  );
};

export default EditPost;

适配说明

如果数据库中帖子关联的分类存储的是分类ID而非名称，只需做3处调整：

• setCategories时传入post.categories.map(item => item._id)
• checked判断改为categories.includes(cate._id)
• 选中逻辑中的cate.name替换为cate._id即可

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