React钩子内的React类组件-DOM未更新

Question

我有以下组成：

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中的状态(。我记录了它，并确认家长中的月份正在更改。在钩子中使用类组件时，这是react的一些限制吗？

当我将HookComponent转换为类组件并使用setState更改月份时，它会按预期工作，DOM会随着输入的更改而更改。

Answer 1

似乎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"
/>
)
}