Реагируйте с помощью хуков для обработки условного рендеринга ссылок

Question

Я пытаюсь выполнить базовый условный рендеринг на основе логина пользователя. У меня есть обработчики событий и вызов axios в компоненте Login.

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>
    )
};

Я хотел бы определить мою функцию setCustomerLogin в App.js и чтобы мой компонент Login вызывал это значение. Пока это мой файл App.js, я просто не знаю, как определить функцию в моем App.js и установить состояние в моем компоненте Login

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 вы все равно получите тот же результат, только теперь вы можете передавать любые реквизиты, которые вы хотите, компоненту для рендеринга. Вы можете прочитать больше о такого рода маршрутизации здесь .

И затем вы можете получить к ним доступ в компоненте 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);
      });

  };