× TypeError: Cannot read property 'push' of undefined in react.js

Question

我正在尝试在 react.js 中使用 useHistory 挂钩，我不明白为什么会出现错误无法对未定义 的属性推送作出反应。

代码：

import { useHistory } from "react-router-dom";
function App() {
  const [loader, setLoader] = useState(false);
  const [errMsg, setErrMsg] = useState("");
  const [signinLoader, setsinginLoader] = useState(false);
  const [opterror, setoptError] = useState("");

const history = useHistory()
  useEffect(() => {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      history.push("/users");
    }
  }, [history]);

这里是我的 app.js 文件的完整代码检查 useState 挂钩，我正在尝试使用 useHistory 挂钩但它不起作用，出现错误无法读取未定义的推送

import "./App.css";
import axios from "axios";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Signup from "./components/Signup";
import Signin from "./components/login";
import Users from "./components/users";

import { useState, useEffect } from "react";
import { useHistory } from "react-router";
function App() {
  const [loader, setLoader] = useState(false);
  const [errMsg, setErrMsg] = useState("");
  const [signinLoader, setsinginLoader] = useState(false);
  const [opterror, setoptError] = useState("");

const history = useHistory()
  useEffect(() => {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      history.push("/");
    }
  }, [history]);

  const formDataSender = async (FormData) => {
    setLoader(true);
    try {
      if (FormData) {
        let res = await axios.post("/api/users", FormData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        });

        if (res) {
          setLoader(false);
          console.log(res);
          setTimeout(() => {
            setErrMsg("");
          }, 1000);

          return setErrMsg(res.data.message);
        }
        return setErrMsg(true);
      }
    } catch (error) {
      setErrMsg(true);
    }
  };

  const timer = (message) => {
    setTimeout(() => {
      setoptError(message);
    }, 1000);
  };

  const loginSender = async (formData) => {
    if (formData) {
      setsinginLoader(true);
      try {
        let res = await axios.post("/api/users/login", formData);
        console.log(res);
        if (res.data.message) {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
          setsinginLoader(false);
          setoptError("login successful !");
          timer("");
          return console.log(res);
        }

        setsinginLoader(false);
        setoptError(res.data.showmessage);
        timer("");
      } catch (error) {
        timer("");
        setoptError("login failed !!");
      }
    }
  };

  return (
    <Router>
      <Switch>
        <div className="App">
          <Route path="/" exact>
            <Signin
              passtologinhandler={loginSender}
              loader={signinLoader}
              additionalInfo={opterror}
            />
          </Route>
          <Route path="/signup">
            <Signup
              passedToSignUpHandler={formDataSender}
              loading={loader}
              err={errMsg}
            />
          </Route>

          <Route path="/users">
            <Users />
          </Route>
        </div>
      </Switch>
    </Router>
  );
}

export default App;

package.json

Answer 1

而不是将 loginSender、signinLoader、opterror 作为属性传递到 Signin 组件中。将所有功能移动到 Signin 组件中。所以在 Signin 组件中，你应该有这样的东西：

export const Signin =(props)=>{
  const [signinLoader, setsinginLoader] = useState(false);
  const [opterror, setoptError] = useState("");
  useEffect(() => {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      history.push("/");
    }
  }, []);


  const loginSender = async (formData) => {
    if (formData) {
      setsinginLoader(true);
      try {
        let res = await axios.post("/api/users/login", formData);
        console.log(res);
        if (res.data.message) {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
          setsinginLoader(false);
          setoptError("login successful !");
          timer("");
          return console.log(res);
        }

        setsinginLoader(false);
        setoptError(res.data.showmessage);
        timer("");
      } catch (error) {
        timer("");
        setoptError("login failed !!");
      }
    }
  };
....

}

应用程序：

return (
    <BrowserRouter>
      <Switch>
        <div className="App">
          <Route path="/" exact>
            <Signin/>
          </Route>
          <Route path="/signup">
            <Signup/>
          </Route>   
          <Route path="/users">
            <Users />
          </Route>
        </div>
      </Switch>
    </BrowserRouter>
  );
}

你应该为 Signup 做同样的事情。

× TypeError: Cannot read property 'push' of undefined in react.js

× TypeError: Cannot read property 'push' of undefined in react.js

reactjs

mern