tengo este componente:
import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; function App() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } export default App; como quiero probar la nueva propuesta de ganchos React instalando react@16.8.1 en mi package.json , pero recibo un error:
TypeError: dispatcher.useState is not a function 2 | import ReactDOM from "react-dom"; 3 | 4 | function App() { > 5 | const [count, setCount] = useState(0); | ^ 6 | useEffect(() => { 7 | document.title = `You clicked ${count} times`; 8 | });¿Qué hice mal?
Puede haber muchas razones, y la mayoría se debe a incompatibilidades de versión o al uso de ^ en package.json :
react y react-dom sean de la misma versión Asegúrese de haber actualizado también el paquete react-dom y que sea de la misma versión que react . En general, react y react-dom siempre deben tener la misma versión en package.json , ya que el equipo de React los actualiza juntos.
Si desea instalar React 16.7.0-alpha.2 , verifique que no esté usando el ^ ya que instalará 16.7 en su lugar, que no tiene ganchos.
Ejemplo package.json :
{ ... "dependencies": { "react": "16.8.4", // Make sure version is same as react-dom "react-dom": "16.8.4", ... } }react-test-renderer es de la misma versión que react y react-dom Si está utilizando Jest, asegúrese de que react-test-renderer sea de la misma versión que react y react-dom :
Ejemplo package.json :
{ ... "dependencies": { "react": "16.8.4", "react-dom": "16.8.4", "react-test-renderer": "16.8.4", ... } }Puede obtener el mismo error al usar jest. Entonces, para corregir el error, tuve que actualizar react-test-renderer para tener la misma versión que react y react-dom
yarn add -D react-test-renderer@nextO
npm i react-test-renderer@nextTodos los react, react-dom y react-test-renderer deben contener la misma versión
"react": "^16.7.0-alpha.0", "react-dom": "^16.7.0-alpha.0", "react-test-renderer": "^16.7.0-alpha.0"Arreglé el mío llamando a React.useState(0) .
Si una versión de reacción es lo suficientemente nueva, solo tiene que usar React.useState .