Question

我正在尝试基于用户登录进行一些基本的条件渲染。我在登录组件中有事件处理程序和axios调用。

const Login = () => {

  const handleChange = event => {
    setCustomerLogin({
      ...customerLogin,
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = e => {
    e.preventDefault();

    axios
      .post("/api/Authentication", customerLogin)
      .then(function(response) {
        setCustomerLogin(response.data);
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

  };

我的Navbar组件现在非常基础，它会自动呈现SignedOutLinks，这是我在用户登录之前显示的链接。

const Navbar = () => {
    return (
        <nav className="nav-wrapper blue darken-4">
            <div className="container">
                <Link to='/' className="brand-logo left">Cars4U</Link>
                <SignedOutLinks />
            </div>
        </nav>
    )
};

我想在App.js中定义我的setCustomerLogin函数，并让我的Login组件调用该值。到目前为止，这是我的App.js文件，我不确定如何在App.js中定义函数并在登录组件中设置状态

const [customerLogin, setCustomerLogin] = useState([
    { username: "", password: "" }
  ]);

function App() {
    return(
        <div className="App">
            <Navbar />
            <Switch>
                <Route path='/login' component={Login}/>                    
                <Route path='/signup' component={Signup}/>
            </Switch>
        </div>
    );
}

Answer 1

您可以将状态设置器（setCustomerLogin）和状态值（customerLogin）传递给Login组件作为道具：

const [customerLogin, setCustomerLogin] = useState([
    { username: "", password: "" }
  ]);

function App() {
    return(
        <div className="App">
            <Navbar />
            <Switch>
                <Route path='/signup' component={Signup}/>
                <Route
                  path="/login"
                  render={() => 
                   <Login 
                    customerLogin={customerLogin} 
                    setCustomerLogin={setCustomerLogin}
                   />}
                 />
            </Switch>
        </div>
    );
}

请注意，我在路由Login组件时使用了一些不同的语法，但仍然会得到相同的结果，只是现在您可以将要传递给该组件的任何prop传递给它。您可以了解有关这种路由here的更多信息。

然后，您可以通过props在Login组件中访问它们：

const Login = ({setCustomerLogin, customerLogin}) => {

  const handleChange = event => {
    setCustomerLogin({
      ...customerLogin,
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = e => {
    e.preventDefault();

    axios
      .post("/api/Authentication", customerLogin)
      .then(function(response) {
        setCustomerLogin(response.data);
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

  };

使用Hook进行反应以处理链接的条件渲染

1 个答案: