时间戳

首页 > 解决方案 > 反应钩子内的反应类组件 - DOM不更新

reactjs - 反应钩子内的反应类组件 - DOM不更新

问题描述

我有以下组成：

const HookComponent = (props)=> {

    let [month, changeMonth] = useState(moment());


    return ( 
        <ChildComponent
            month={month}
            onChange={m => changeMonth(m)}
            minStep={5}
            prevMonthIcon="ion-ios-arrow-left"
            nextMonthIcon="ion-ios-arrow-right"
          />
    )
}

ChildComponent 是一个类组件，它使用 setState 更新月份。上面的问题是更改没有反映在 DOM 上，而是父组件中的状态正在更改（通过用户输入 - 按钮更改 ChildComponent 中的状态）。我记录了它并确认父母的月份正在改变。在钩子中使用类组件时，这是反应的一些限制吗？

当我将 HookComponent 转换为类组件并使用 setState 更改月份时，它会按预期工作，并且 DOM 在输入更改时发生更改。

标签： reactjsreact-hooksreact-component

解决方案

该InputMoment组件似乎没有使用month道具，而是使用道具moment。

此外，它似乎返回了作为道具InputMoment传递的同一时刻实例。moment这导致当您执行changeMonth语句时，由于引用没有改变，因此不会重新渲染元素。

您可以通过在状态中存储对象来解决此问题。当您调用时，changeMonth您传递一个新对象，InputMoment然后正确地重新渲染：

const HookComponent = (props)=> {
    let [month, changeMonth] = useState({ m: moment() });

    return ( 
        <ChildComponent
            moment={month.m}
            onChange={m => changeMonth({ m })}
            minStep={5}
            prevMonthIcon="ion-ios-arrow-left"
            nextMonthIcon="ion-ios-arrow-right"
          />
    )
}

推荐阅读