javascript - TypeError dispatcher.useState no es una función cuando se utilizan React Hooks

reactjs react-hooks

Question

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 [email protected] 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?

Answer 1

Ahora que se ha liberado la reacción 16.7 (la que no contiene ganchos) es posible que obtenga un error si escribe ^16.7.0-alpha.0 con la ^ principal en su package.json .

Para la versión con ganchos hay que omitir el ^ .

Answer 2

Puede haber muchas razones, y la mayoría se deben a incompatibilidades de versión:

1. Asegúrese de que también haya actualizado el paquete react-dom y que tenga la misma versión que react . En general, react y react-dom debe ser siempre la misma versión en package.json ya que el equipo de React los actualiza juntos.

Ejemplo package.json :

{
  ...
  "dependencies": {
    "react": "^16.7.0-alpha.0",
    "react-dom": "^16.7.0-alpha.0", // Make sure version is the same as react
    ...
  }
}

2. 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.7.0-alpha.0",
    "react-dom": "^16.7.0-alpha.0",
    "react-test-renderer": "^16.7.0-alpha.0",
    ...
  }
}

Answer 3

Puede obtener el mismo error al usar broma. Así que para corregir el error tuve que actualizar react-test-renderer para tener la misma versión que reaccionar y reaccionar-dom

   yarn add -D react-test-renderer@next

O

     npm i react-test-renderer@next

Todos reaccionan, 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"