React 功能组件在重新挂载后停止渲染状态更改

Question

对于这种奇怪情况的任何建议将不胜感激。

我有一个父组件，它监听子组件的回调状态，并根据状态呈现进度指示器。子组件是一个编辑器，使用备忘录来防止重新渲染。这是编辑器包所必需的。当父母和孩子第一次安装时一切正常，但如果父母被卸载并重新安装，它不会呈现由孩子回调触发的状态变化。

我尝试了各种方法来强制重新渲染，但似乎没有任何效果。我在状态中添加了一个计数器并延迟了更新状态。我使用 ref 作为值，因为在闭包中访问状态。

子组件是一个编辑器，监听websocket信息，异步调用handleStatus回调。重新挂载并将更新发送到 handleStatus 回调后，子组件工作正常。

父组件：

const [isConnected, setIsConnected] = useState<number>(0);
const forceUpdate = useRef<number>(0);
const statusRef = useRef('connected')


const handleStatus = (status: string) => {

    if ('connected' !== status) {
        forceUpdate.current += 1;
        setTimeout(()=>{
            setIsConnected(forceUpdate.current);
        }, 100)
        statusRef.current = status;
    } 
}

<div style={{width: '100%'}} >
      {statusRef.current === 'connected' ? null : <CircularProgress />}
      <ChildComponent key={roomId} roomId={roomId} handleStatus={handleStatus}/>
</div>

从调试器中，我可以看到正在调用 handleStatus，并且正在使用新值调用 setIsConnected。但是当状态改变时，父级不会渲染。

同样，父级仅在重新挂载后才停止侦听状态更新。在第一次挂载时，父级会在每次状态更新时呈现。

我们将不胜感激任何建议。

编辑： 我对父组件使用相同的键，因此 react 应该重新安装现有组件而不是创建新组件。从我所见，它看起来确实是在重新安装同一个组件，因为 ref 保留了它的值并且来自子组件的回调仍然有效。状态值是陈旧的，但这是意料之中的，因为它处于关闭状态。唯一没有意义的是我似乎无法通过更新 setState 来触发重新渲染。我什至尝试了一个状态函数，以防 setState 也变得陈旧，但这也没有用。

Answer 1

您需要使用 useEffect 并作为依赖项放置 statusRef 变量

useEffect(() => {
    
}, [statusRef])

<ChildComponent key={roomId} roomId={roomId} handleStatus={handleStatus}/>