React Hook 中的 React class 组件 - 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 是一个 class 组件，它使用 setState 更新月份。上面的问题是更改没有反映在 DOM 上，但是 parent 组件中的状态正在更改（通过用户输入 - 更改 ChildComponent 中的状态的按钮）。我记录下来并确认 parent 中的月份正在改变。在挂钩中使用 class 组件时，这是反应的一些限制吗？

当我将 HookComponent 转换为 class 组件并使用 setState 更改月份时，它按预期工作并且 DOM 随输入变化而变化。

Answer 1

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

此外，InputMoment 似乎返回了作为 moment prop 传递的同一时刻实例。这会导致当您执行 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"
          />
    )
}

React Hook 中的 React class 组件 - DOM 未更新

React class component inside react hook - DOM not updating

reactjs

react-component

react-hooks