Следующие JS перехватчики не будут работать внутри Docker контейнера с Nginx передачей прокси - PullRequest
Новая
       3

Следующие JS перехватчики не будут работать внутри Docker контейнера с Nginx передачей прокси

0 голосов
/ 04 февраля 2020

У меня есть docker -контейнер для моего приложения JS и dockerfile, которые получают ARG из команды docker -compose и запускают npm run dev, все работает нормально, но когда я использую состояния, я получаю ошибку здесь описано - https://uk.reactjs.org/warnings/invalid-hook-call-warning.html, но когда я запускаю эту команду прямо в каталоге приложения (без использования docker и nginx) - она ​​отлично работает, поэтому не проблема с моим кодом, ее проблема с работой следующего js сервера разработки внутри docker -контейнера.

Вот код моего компонента, который выдает ошибку внутри docker: 

import fetch from "isomorphic-unfetch";

import {
  FormGroup,
  Form,
  Label,
  Input,
  Button,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu
} from "reactstrap";

const LoginForm = () => {
  var loginUrl = process.env.API_URL;
  const [loginInfo, setLoginInfo] = useState({
    email: "",
    password: ""
  });

  const [loginErrors, setErrors] = useState({
    email: false,
    password: false
  });

  const updateLogin = evt => {
    setLoginInfo({
      email: evt.target.value,
      password: loginInfo.password
    });
  };

  const updatePassword = evt => {
    setLoginInfo({
      email: loginInfo.email,
      password: evt.target.value
    });
  };

  const tryLogin = evt => {
    evt.preventDefault();

    if (loginInfo.email.length > 5 && loginInfo.password.length > 1) {
      // Send form to backend
      login(loginInfo.email, loginInfo.password);
    } else
      setErrors({
        email: !(loginInfo.email.length > 5),
        password: !(loginInfo.password.length > 1)
      });
  };

  const login = (email, password) => {
    fetch(loginUrl, {
      method: "post",
      body: JSON.stringify({
        arguments: {
          email: email,
          password: password
        },
        widget: "WLogin",
        method: "login"
      }),
      headers: { "Content-Type": "application/json" }
    })
      .then(result => result.json())
      .then(result => {
        console.log(result);
      })
      .catch(err => console.error(err));
  };

  return (
    <UncontrolledDropdown>
      <DropdownToggle nav>Вход</DropdownToggle>
      <DropdownMenu right>
        <div className="py-1 px-3">
          <Form
            className="loginForm"
            onSubmit={evt => {
              tryLogin(evt);
            }}
          >
            <FormGroup>
              <Label for="email">Ваш E-mail</Label>
              <Input
                type="email"
                id="email"
                name="email"
                className={loginErrors.email ? "is-invalid" : ""}
                value={loginInfo.email}
                placeholder="mail@mail.net"
                onChange={updateLogin}
              />
            </FormGroup>
            <FormGroup className={loginErrors.password ? "has-error" : ""}>
              <Label for="password">Пароль</Label>
              <Input
                type="password"
                autoComplete="new-password"
                name="password"
                id="password"
                className={loginErrors.email ? "is-invalid" : ""}
                placeholder="******"
                value={loginInfo.password}
                onChange={updatePassword}
              />
            </FormGroup>
            <FormGroup className="text-center">
              <Button color="primary">Вход</Button>
            </FormGroup>
          </Form>
        </div>
      </DropdownMenu>
    </UncontrolledDropdown>
  );
};
export default LoginForm;

PS, если я создаю приложение и запускаю npm run start - он отлично работает даже с docker и Nginx прокси, но мне нужно разработать свое приложение внутри docker без необходимости каждый раз запускать сборку.

...