React子组件state不更新、props初始化undefined但render中可用

• 渲染逻辑与state完全脱节：render函数中所有展示内容直接读取this.props.value，从未使用组件内部维护的Value、Subtotal state值。哪怕handleChange中正常执行了setState更新内部状态，页面渲染的内容也始终是props传入的旧值，从视觉表现上会完全呈现出“state没有正常更新”的假象。
• 生命周期函数错误使用async修饰：componentDidMount、componentDidUpdate本身是同步执行的生命周期钩子，加了async之后，函数内部的执行流会被拆成同步段和异步微任务段，React不会等待异步逻辑执行完成就推进渲染流程，很容易出现setState执行时机错位，进一步让状态更新和渲染节奏不匹配。
• props同步state的逻辑存在失效窗口：类组件如果绑定了稳定的key值，不会因为父组件传入的props更新就销毁重建实例。如果首次渲染阶段props还未传递完成，constructor执行时读取到的this.props.value、this.props.subtotal就是undefined，这部分值会被永久存在初始state里；哪怕后续props到位，constructor里的初始化逻辑也不会重新执行，最终出现“初始化state拿到undefined、render里读同一props却正常”的割裂现象。而当前代码在componentDidMount里又重复执行了一遍state赋值，等于完全覆盖了constructor里初始化的state，让constructor里的state初始化逻辑变成冗余代码。
• 更新回调逻辑存在循环触发风险：componentDidUpdate中没有校验props的前后差异，只要检测到内部state变化就调用父组件的getValue方法，父组件收到回调更新状态后会反向给当前组件传入新的props，反复触发当前组件的更新流程，很容易触发React的更新栈超限报错，中断所有状态更新流程。
• contentEditable的内容同步逻辑冲突：使用contentEditable的div作为编辑容器时，render阶段会每次把格式化后的props值重新塞回DOM内容区，只要父组件有任何一次重渲染，用户在编辑区的输入内容就会被强制覆盖回旧值，进一步放大state更新失效的感知。

• 调整render逻辑，展示时优先读取组件内部维护的state值，替代直接读props的写法，让setState的结果可以真正反映在页面上。
• 移除生命周期函数上的async修饰，保证生命周期内的同步执行逻辑和React的渲染节奏保持一致。
• 移除constructor、componentDidMount里重复的props读值同步state的逻辑：如果需要做props到state的同步，使用static getDerivedStateFromProps生命周期配合props变化做统一同步；如果没有必要在子组件存本地状态，直接改成完全受控的组件逻辑，所有值完全从props读取，编辑时通过回调把值传给父组件更新，避免受控/非受控逻辑混杂。
• 给componentDidUpdate加上前后值差异的校验条件，只有props发生真实变更时才同步内部state，避免无意义的重复setState和循环回调。
• 针对contentEditable的使用场景，避免React重渲染时强制覆盖用户正在编辑的内容，或者替换为原生input输入框，降低内容同步的复杂度。

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