Блог

Я новичок в реагировании и машинописи, и я пытаюсь использовать простой подход. Тем не менее, это не работает. Я всегда получаю ошибку: Необработанный отказ (ошибка типа): setToken не является функцией. Кто-нибудь может дать мне подсказку?

Приложение.tsx

 import React from "react" import './App.css'; import VacationManager from "./VacationManager"; import Login from './Login';  function App() {  const [token, setToken] = React.useStatelt;string | nullgt;(null);   if(!token) {  return lt;Login setToken={setToken} /gt;;  }   return lt;div className="App"gt;  lt;div className="Header"gt;lt;/divgt;  lt;div className="App-Body"gt;  lt;VacationManager /gt;  lt;/divgt;  lt;/divgt;; }  export default App;  

Войдите в систему.tsx

 import React from 'react'; import PropTypes from 'prop-types'; import './Login.css';  async function loginUser(credentials: { username:string | null, password:string | null }) {  return (credentials.username === "test" amp;amp; credentials.password === "test") ? "new_login_state" : null; }  function Login(setToken: React.Dispatchlt;React.SetStateActionlt;string | nullgt;gt;) {  const [username, setUserName] = React.useStatelt;string | nullgt;(null);  const [password, setPassword] = React.useStatelt;string | nullgt;(null);   const handleSubmit = async (e: { preventDefault: () =gt; void; }) =gt; {  e.preventDefault();  const token = await loginUser({  username,  password  });  setToken(token);  }   return lt;div className="login-wrapper"gt;  lt;h1gt;Please Log Inlt;/h1gt;  lt;form onSubmit={handleSubmit}gt;  lt;labelgt;  lt;pgt;Usernamelt;/pgt;  lt;input type="text" onChange={e =gt; setUserName(e.target.value)}/gt;  lt;/labelgt;  lt;labelgt;  lt;pgt;Passwordlt;/pgt;  lt;input type="password" onChange={e =gt; setPassword(e.target.value)}/gt;  lt;/labelgt;  lt;divgt;  lt;button type="submit"gt;Submitlt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;; }  Login.propTypes = {  setToken: PropTypes.func.isRequired }  export default Login;  

После ввода имени пользователя и пароля я получаю вышеупомянутую ошибку. То, что я пытаюсь сделать, — это передать сеттер компоненту входа в систему, чтобы он мог обновить статус токена. Это всего лишь очень простой пример для начала, но, тем не менее, я не понимаю, что я делаю неправильно.

В компоненте входа в систему первым параметром является объект со свойствами, setToken являющийся одним из них. Вы можете перейти на:

 interface LoginProps {  setToken: React.Dispatchlt;React.SetStateActionlt;string | nullgt;gt;; }  function Login({ setToken }: LoginProps) {  ... }