React接口数据更新state失败求助：calendarHeading等变量未赋值

我通过getCalendarData函数从API获取响应数据，在useEffect中调用该函数实现组件加载时获取数据。尝试将响应中的对象键值赋值给calendarHeading和calendarDescription这两个state变量，但它们始终返回undefined。当calendarSlugData成功获取响应值后，其他目标state并未同步更新，怀疑组件重渲染逻辑出错。尝试将calendarSlugData加入useEffect依赖数组却触发无限循环。

组件代码如下：

const CalendarCard = (props) => {
    const { calendarModal, formData, redirectCTA, formCTA, showForm, calSlug } = props;
    let {heading, description} = props;
    const { delayTime, link, label, clickTag } = calendarModal;
    const [step, setStep] = useState(showForm ? 1 : 2);
    const [calendarThankYouData, setCalendarThankYouData] = useState({});
    
    const [calendarSlugData, setCalendarSlugData]=useState({});
    const durationInMinutes = (slotsFromQuery && !isNaN(parseInt(slotsFromQuery))) ? parseInt(slotsFromQuery) : 30;
    const calRequestType = 'CALENDAR_LEAD';

    const calculateHeading = () => {
        heading = modalType === 'Go modal' ? 'Let a Birdeye specialist show you!' : calendarSlugData.heading;
        return heading;
    };

    const calculateDescription = () => {
        description = modalType === 'Go modal' ? 'Book a personalized demo for free with a Birdeye product expert' : calendarSlugData.subHeading;
        return description;
    };
    const [calendarHeading, setCalendarHeading] = useState(step === 3 ? 'All set!' : calculateHeading());
    const [calendarDescription, setCalendarDescription] = useState(step === 3 ? 'We’re looking forward to chatting with you soon!' : calculateDescription());
    // console.log("heading value", heading);
    // console.log("description  value", description);
 
    const getCalendarData = async (calendarSlug) => {
        let calendarData = {};
        const slug = 'cal/' + calendarSlug;
        try {
            const { data } = await contentAPI.get('/calendar/page');
            const pageObj = data.filter(calendar => calendar.active && calendar.slug === slug);
            if(!isEmpty(pageObj)) calendarData = pageObj[0];
            else throw { wrongSlug:true };
        } catch (e) {
            console.error('===@@@===', e);
            throw {notFound: true};
        }
        return calendarData;
    };

    useEffect(() => {
        getCalendarData(calSlug).then(calendarData => {
            console.log('calendarData is', calendarData);
            setCalendarSlugData(calendarData);
        });
        
            
    }, []);

    const [calendarObject, setCalendarObject] = useState({
        type: calType,
        durationInMinutes,
        slug: 'cal/' + calSlug,
        requestType: calRequestType,
        statusFailedHandler,
        formData: getCompleteFormData(formData), // formData is from an independent form
        handleCalendarAndSlot: (thankYouData) => {
            if (modalType === 'Go modal') autoRedirect();
            setCalendarThankYouData({...thankYouData, duration: durationInMinutes, redirectCTA, formCTA, requestType: calRequestType, modalType});
            setCalendarHeading(step === 3 ? 'All set!' : heading);
            setCalendarDescription(step === 3 ? 'We’re looking forward to chatting with you soon!' : description);
            setStep((prevState) => (prevState + 1));
        },
        formCTA,
        modalType
    });

    console.log('CalendarSlugData is', calendarSlugData);
    console.log("step is", step);
    console.log('final heading', calendarHeading);
    console.log('final description is', calendarDescription);
    
}

经调试发现，heading和description变量已成功获取响应值，但无法传递给calendarHeading和calendarDescription。

错误原因分析 #

• 初始state依赖未加载的数据：calendarHeading和calendarDescription的初始值调用calculateHeading/calculateDescription时，calendarSlugData还是空对象，初始化后不会自动重新计算。
• 直接修改props变量：直接修改从props解构的heading和description（heading = ...），props是只读属性，这种操作会导致变量值与state不同步，逻辑混乱。
• 未监听依赖变化更新state：calendarSlugData或step变化时，没有触发calendarHeading和calendarDescription的更新逻辑。
• calendarObject用state存储动态值：calendarObject包含依赖动态值的函数和数据，用useState存储会导致无法自动更新，还可能触发无限循环。

修复方案 #

1. 禁止直接修改props变量

重构calculateHeading和calculateDescription，直接返回计算结果，不修改props变量：

const calculateHeading = () => {
  return modalType === 'Go modal' 
    ? 'Let a Birdeye specialist show you!' 
    : (calendarSlugData.heading || '');
};

const calculateDescription = () => {
  return modalType === 'Go modal' 
    ? 'Book a personalized demo for free with a Birdeye product expert' 
    : (calendarSlugData.subHeading || '');
};

2. 监听依赖变化更新目标state

新增useEffect，监听calendarSlugData和step的变化，实时更新calendarHeading和calendarDescription：

useEffect(() => {
  const newHeading = step === 3 ? 'All set!' : calculateHeading();
  const newDescription = step === 3 ? 'We’re looking forward to chatting with you soon!' : calculateDescription();
  setCalendarHeading(newHeading);
  setCalendarDescription(newDescription);
}, [calendarSlugData, step]);

3. 优化初始state值

将calendarHeading和calendarDescription的初始值设为空字符串，避免依赖未加载的数据：

const [calendarHeading, setCalendarHeading] = useState('');
const [calendarDescription, setCalendarDescription] = useState('');

4. 用useMemo替代useState存储calendarObject

calendarObject依赖多个动态值，用useMemo包裹，确保只有依赖项变化时才重新计算：

const calendarObject = useMemo(() => ({
  type: calType,
  durationInMinutes,
  slug: 'cal/' + calSlug,
  requestType: calRequestType,
  statusFailedHandler,
  formData: getCompleteFormData(formData),
  handleCalendarAndSlot: (thankYouData) => {
    if (modalType === 'Go modal') autoRedirect();
    setCalendarThankYouData({...thankYouData, duration: durationInMinutes, redirectCTA, formCTA, requestType: calRequestType, modalType});
    const newHeading = step === 3 ? 'All set!' : calculateHeading();
    const newDescription = step === 3 ? 'We’re looking forward to chatting with you soon!' : calculateDescription();
    setCalendarHeading(newHeading);
    setCalendarDescription(newDescription);
    setStep(prev => prev + 1);
  },
  formCTA,
  modalType
}), [calType, durationInMinutes, calSlug, calRequestType, statusFailedHandler, formData, modalType, redirectCTA, formCTA, step]);

5. 修正数据获取的useEffect依赖

给初始的useEffect添加calSlug依赖，确保calSlug变化时重新获取数据：

useEffect(() => {
  getCalendarData(calSlug).then(calendarData => {
    console.log('calendarData is', calendarData);
    setCalendarSlugData(calendarData);
  }).catch(err => {
    console.error('获取日历数据失败:', err);
  });
}, [calSlug]);

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