TypeError dispatcher.useState는 React Hook을 사용할 때 함수가 아닙니다.
다음 컴포넌트가 있습니다.
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;
새로운 리액트 훅 제안을 시험해 보고 싶기 때문에react@16.8.1
내 안에서package.json
에러가 표시됩니다.
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 | });
제가 무엇을 잘못했나요?
여러 가지 이유가 있을 수 있는데, 대부분은 버전이 호환되지 않거나 를 사용하기 때문입니다.^
…에.package.json
:
1. 확인react
그리고.react-dom
같은 버전입니다.
또한 업데이트되었는지 확인합니다.react-dom
패키지와 같은 버전입니다.일반적으로react
그리고.react-dom
에서는 항상 같은 버전이어야 합니다.package.json
리액트 팀이 함께 업데이트하기 때문입니다.
React를 설치하는 경우16.7.0-alpha.2
를 사용하고 있지 않은지 확인합니다.^
대신 후크가 없는 16.7을 설치합니다.
예package.json
:
{
...
"dependencies": {
"react": "16.8.4", // Make sure version is same as react-dom
"react-dom": "16.8.4",
...
}
}
2. react-test-renderer
와 같은 버전입니다.react
그리고.react-dom
Jest를 사용하는 경우 다음 사항을 확인합니다.react-test-renderer
와 같은 버전입니다.react
그리고.react-dom
:
예package.json
:
{
...
"dependencies": {
"react": "16.8.4",
"react-dom": "16.8.4",
"react-test-renderer": "16.8.4",
...
}
}
농담 사용 시 동일한 오류가 발생할 수 있습니다.따라서 오류를 수정하기 위해 react-test-renderer를 react 및 react-dom과 동일한 버전으로 업데이트해야 했습니다.
yarn add -D react-test-renderer@next
또는
npm i react-test-renderer@next
모든 react, react-dom 및 react-test-renderer는 동일한 버전을 포함해야 합니다.
"react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0",
"react-test-renderer": "^16.7.0-alpha.0"
전화로 내 것을 고쳤다.React.useState(0)
.
리액트 버전이 충분히 새로운 버전이라면React.useState
.
response 16.7(훅이 포함되지 않은 것)이 해방되었습니다.입력하면 에러가 발생할 수 있습니다.^16.7.0-alpha.0
선두에 서서^
당신의 안에서package.json
.
후크가 있는 버전에서는^
.
후크를 올바르게 사용하고 있는지 확인합니다.당신이 잘못 사용했을 때도 작동하지만 오류 설명이 충분하지 않습니다.
import React,{useState} from 'react';
const ComponentName= () => {
const[stateOne, setStateOne]= useState(initial); // right usage - []
const{stateTwo, setStateTwo}= useState(initial); // wrong usage - {}
useEffect(() => {
setStateOne(value1);
setStateTwo(value2);
}, []);
}
export default ComponentName;
리액트 및 리액트 DOM의 최신 버전으로 업데이트했습니다.이 버전에는 문제가 없습니다.React 버전 확인은 이쪽
같은 에러가 발생했습니다.
제 실수는 다음과 같습니다.
import {useState} from 'react/cjs/react.development'
다음을 사용합니다.
import {useState} from 'react'
리액트 및{useState}
:
import React,{useState} from 'react';
const Renu = () => {
const[heart,heartSet]= useState('renu');
return(
<h1>vikas love {heart}</h1>
)
}
export default Renu;
언급URL : https://stackoverflow.com/questions/53024307/typeerror-dispatcher-usestate-is-not-a-function-when-using-react-hooks