React应用条件渲染突然失效，保存文件后恢复问题求助

此前我的React组件运行完全正常，但从昨天起，条件渲染内容突然失效，一直处于加载状态（例如本组件中的successMessage无法更新）。只有修改文件（哪怕仅添加空格）并保存后，未渲染的内容才会正常显示。昨日我修改了多处代码，无法定位问题，现附上组件代码寻求帮助：

import {useState, useEffect, useRef} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createWorker } from '../../actions/worker';

import '../components.scss';

const New = () => {
     
    const [worker, setWorker] = useState(
        {
            name: "",
            email: "",
            confirmation_email: "",
            admin: false
        }
    );

    const [checked, setChecked] = useState(false); //判断管理员复选框是否勾选
    const [successMessage, setSuccessMessage] = useState(null); //上传成功时在底部显示提示信息

    const dispatch = useDispatch();
    const errors = useSelector((state) => state.errors.error);
    const selectedWorker = useSelector((state) => state.workers.current_worker); //用于判断用户是否有权限访问此页面
 
    const renderedAlreadyRef = useRef(false); //标记组件是否已完成首次渲染

    useEffect(() => {
        //用于检测allWorkers.workers是否更新，同时通过ref renderedAlreadyRef确保仅在渲染后执行
        if (renderedAlreadyRef.current === true && Object.keys(errors).length === 0){
            setSuccessMessage("Worker created successfully");
        }
    }, [errors])

    const handleSubmit = (e) => {
        //处理表单提交
        e.preventDefault();
        dispatch(createWorker(worker));
        renderedAlreadyRef.current = true;
    }


    const handleChange = (e) => {
        const newKey = e.target.id;
        const newValue = e.target.value
        if (newKey === "admin"){
            setChecked(!checked)
            setWorker(oldState => ({...oldState, "admin": !checked}))
        }
        else{
            setWorker(oldState => ({ ...oldState, [newKey]: newValue}));
        }
        
        
    }
    if (Object.keys(selectedWorker).length !== 0){
        if (selectedWorker.admin === 1){
            return(
                <>
                    <form id="worker_form" onSubmit={e => handleSubmit(e)}>
                        <label>
                            Worker Name: 
                            <input type="text" defaultValue={worker.name} id="name" onChange={e => handleChange(e)}></input>
                        </label>
                        <label>
                            Worker Email: 
                            <input type="text" defaultValue={worker.email} id="email" onChange={e => handleChange(e)}></input>
                        </label>
                        <label>
                            Confirmation Email: 
                            <input type="text" defaultValue={worker.confirmation_email} id="confirmation_email" onChange={e => handleChange(e)}></input>
                        </label>
                        <label>
                            Are they an admin?: <input type="checkbox" checked={checked} id="admin" onChange={e => handleChange(e)} />
                        </label>
                        <button type="submit" onClick={e => handleSubmit(e)} className="submit_new_button">Submit</button>
                    </form>
                    <h3 className='new_messages'>{successMessage}</h3>
                </>
            )
        }
        else{
            return(
                <div id="Forbidden">
                    <h1>Error 403 - Forbidden</h1>
                    <h2>You do not have access to this page</h2>
                </div>
            )
        }
    }
    else{
        return(<h1>Loading...</h1>)
    }
}

export default New;

核心问题1：useEffect依赖逻辑错误 #

你的useEffect仅监听errors，但用空errors判断创建成功的逻辑不严谨：如果初始状态errors就是空对象，首次渲染会误触发提示；且创建成功后errors没有变化时，useEffect不会触发，导致successMessage不更新。另外，renderedAlreadyRef在handleSubmit中同步设置，此时errors还未完成更新，逻辑时机错位。

核心问题2：selectedWorker状态未正确更新 #

组件一直显示Loading...，说明workers.current_worker的Redux状态未被正确赋值。热重载时会重新拉取状态，所以修改文件后能正常显示，需要排查该状态的初始化或更新逻辑。

核心问题3：复选框状态同步隐患 #

handleChange中处理admin复选框时，setWorker依赖外部checked状态，闭包会导致状态不同步。

修复步骤 #

1. 调整成功提示触发逻辑

放弃依赖errors，改为监听worker列表的更新（或在异步action完成后直接触发提示）：

// 监听workers列表变化
const workers = useSelector(state => state.workers.workers);

useEffect(() => {
  if (renderedAlreadyRef.current) {
    setSuccessMessage("Worker created successfully");
    // 可选：3秒后清除提示
    setTimeout(() => setSuccessMessage(null), 3000);
    // 重置ref避免重复触发
    renderedAlreadyRef.current = false;
  }
}, [workers]);

2. 修正异步提交的ref时机

如果createWorker是返回Promise的异步action，在提交成功后再标记ref：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    await dispatch(createWorker(worker));
    renderedAlreadyRef.current = true;
  } catch (err) {
    // 处理错误逻辑
  }
}

3. 排查selectedWorker状态更新

添加日志确认状态变化：

useEffect(() => {
  console.log('selectedWorker:', selectedWorker);
}, [selectedWorker]);

检查对应的Redux reducer，确保current_worker在组件挂载时被正确初始化或通过action赋值。

4. 修复复选框状态同步

改用函数式更新避免闭包问题：

if (newKey === "admin"){
  setChecked(prev => !prev);
  setWorker(oldState => ({...oldState, "admin": !oldState.admin}));
}

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