Por ejemplo, el siguiente es mi código cuando actualizo React de 17 a 18, el renderizado de ReactDom se vuelve asíncrono, por lo que uso #act para envolver el renderizado de ReactDom de React pero reaccionar siempre requiere envolver todo setState con #act
si no, generará una advertencia When testing, code that causes React state updates should be wrapped into act(...) , es un gran trabajo
así que espero una forma de hacer que ReactDom se sincronice como React 17 y sin #act warn
class C extends Component<{}, { k: number }> { constructor(p: any) { super(p) this.state = {k: 0} } render() { return <div onClick={() => { // act(() => { // assume this.setState is lib code not test code, I cannot always use act wrap setState this.setState({k: this.state.k + 1}) // }) }}>{this.state.k}</div> } } var r = ReactDOM.createRoot(document.querySelector("#root")) var c: C act(() => { r.render(<C ref={e => c = e}/>) }) c // act wrap r.render is required in react 18, since react 18 #render is async but many my old project test codes are syncEncuentro la solución, no está por encima del error de código de mi pregunta
la razón del error es:
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true act(() => { root.render(testTemplate) });habilitar IS_REACT_ACT_ENVIRONMENT siempre requerirá setState debe estar envuelto con #act
entonces la siguiente es la solución
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true act(() => { root.render(testTemplate) }); (globalThis as any).IS_REACT_ACT_ENVIRONMENT = false