Javascript 如何将变量传递给Redux操作

我正在使用ReactJS和Redux，并试图将“locale”变量从Login.js传递到authActions.js。locale变量仅表示所使用的语言

我尝试将其作为参数添加到reduxForm中，但未定义语言环境。因此，我尝试通过从LocaleContext钩子中检索来定义它，但不允许使用钩子（出于这个原因，我也无法在authoctions中检索它）

将区域设置引入authActions的好解决方案是什么？我想做的就是翻译authoactions中的错误消息

Login.js

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field
          name="email"
          label="Email"
          component={renderField}
          type="text"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        <Field
          name="password"
          label={getTranslation(locale, Translations.Password)}
          component={renderField}
          type="password"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        {renderError(error)}

        <Button type="submit" variant="contained" color="primary">
          <Translation translation={Translations.Log_in} />
        </Button>
      </fieldset>
    </form>
  );
}

export default reduxForm({
  form: "login",
  onSubmit: loginUser,
  locale: locale, // This doesn't work, locale is undefined
})(Login);

export function loginUser(formValues, dispatch, props) {

  const locale = React.useContext(LocaleContext); // Doesn't work - cannot use hooks here.

  const loginUrl = AuthUrls.LOGIN;

  return axios
    .post(loginUrl, formValues)
    .then((response) => {
      const token = response.data.key;
      dispatch(authLogin(token));
      localStorage.setItem("token", token);
      history.push("/");
    })
    .catch((error) => {
      console.log("how do I get locale here?", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

export function authLogin(token) {
  return {
    type: AuthTypes.LOGIN,
    payload: token,
  };
}

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  useEffect(() => {
    props.initialize({ locale: locale });
  }, [locale]);

  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field
          name="email"
          label="Email"
          component={renderField}
          type="text"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        <Field
          name="password"
          label={getTranslation(locale, Translations.Password)}
          component={renderField}
          type="password"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

    <fieldset className="form-group" style={{ display: "none" }}>
      <Field
        name="locale"
        label="locale"
        component={renderField}
        type="text"
        validate={[
          required({
            message: getTranslation(locale, Translations.FieldRequired),
          }),
        ]}
      />
    </fieldset>

    <fieldset className="form-group" style={{ display: "none" }}>
      <Field name="locale" component={renderField} />
    </fieldset>

      <fieldset className="form-group">
        {renderError(error)}

        <Button type="submit" variant="contained" color="primary">
          <Translation translation={Translations.Log_in} />
        </Button>
      </fieldset>
    </form>
  );
}

export default reduxForm({
  form: "login",
  onSubmit: loginUser,
  locale: locale, // This doesn't work, locale is undefined
})(Login);

export function loginUser(formValues, dispatch, props) {

  const locale = formValues.locale; // WORKS!

  const loginUrl = AuthUrls.LOGIN;

  return axios
    .post(loginUrl, formValues)
    .then((response) => {
      const token = response.data.key;
      dispatch(authLogin(token));
      localStorage.setItem("token", token);
      history.push("/");
    })
    .catch((error) => {
      console.log("Locale is here!", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

export function authLogin(token) {
  return {
    type: AuthTypes.LOGIN,
    payload: token,
  };
}

---

我为我的问题找到了一个解决方案，并想与大家分享，以防其他人陷入这个问题。我只是在useEffect中使用props.initialize向表单添加一个新值。然后在authActions中，我只调用formValues.locale

在选择正确答案之前，我会等待，以防有人有比这更好的解决方案

Login.js

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field
          name="email"
          label="Email"
          component={renderField}
          type="text"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        <Field
          name="password"
          label={getTranslation(locale, Translations.Password)}
          component={renderField}
          type="password"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        {renderError(error)}

        <Button type="submit" variant="contained" color="primary">
          <Translation translation={Translations.Log_in} />
        </Button>
      </fieldset>
    </form>
  );
}

export default reduxForm({
  form: "login",
  onSubmit: loginUser,
  locale: locale, // This doesn't work, locale is undefined
})(Login);

export function loginUser(formValues, dispatch, props) {

  const locale = React.useContext(LocaleContext); // Doesn't work - cannot use hooks here.

  const loginUrl = AuthUrls.LOGIN;

  return axios
    .post(loginUrl, formValues)
    .then((response) => {
      const token = response.data.key;
      dispatch(authLogin(token));
      localStorage.setItem("token", token);
      history.push("/");
    })
    .catch((error) => {
      console.log("how do I get locale here?", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

export function authLogin(token) {
  return {
    type: AuthTypes.LOGIN,
    payload: token,
  };
}

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  useEffect(() => {
    props.initialize({ locale: locale });
  }, [locale]);

  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field
          name="email"
          label="Email"
          component={renderField}
          type="text"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        <Field
          name="password"
          label={getTranslation(locale, Translations.Password)}
          component={renderField}
          type="password"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

    <fieldset className="form-group" style={{ display: "none" }}>
      <Field
        name="locale"
        label="locale"
        component={renderField}
        type="text"
        validate={[
          required({
            message: getTranslation(locale, Translations.FieldRequired),
          }),
        ]}
      />
    </fieldset>

    <fieldset className="form-group" style={{ display: "none" }}>
      <Field name="locale" component={renderField} />
    </fieldset>

      <fieldset className="form-group">
        {renderError(error)}

        <Button type="submit" variant="contained" color="primary">
          <Translation translation={Translations.Log_in} />
        </Button>
      </fieldset>
    </form>
  );
}

export default reduxForm({
  form: "login",
  onSubmit: loginUser,
  locale: locale, // This doesn't work, locale is undefined
})(Login);

export function loginUser(formValues, dispatch, props) {

  const locale = formValues.locale; // WORKS!

  const loginUrl = AuthUrls.LOGIN;

  return axios
    .post(loginUrl, formValues)
    .then((response) => {
      const token = response.data.key;
      dispatch(authLogin(token));
      localStorage.setItem("token", token);
      history.push("/");
    })
    .catch((error) => {
      console.log("Locale is here!", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

export function authLogin(token) {
  return {
    type: AuthTypes.LOGIN,
    payload: token,
  };
}

---

我为我的问题找到了一个解决方案，并想与大家分享，以防其他人陷入这个问题。我只是在useEffect中使用props.initialize向表单添加一个新值。然后在authActions中，我只调用formValues.locale

在选择正确答案之前，我会等待，以防有人有比这更好的解决方案

Login.js

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field
          name="email"
          label="Email"
          component={renderField}
          type="text"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        <Field
          name="password"
          label={getTranslation(locale, Translations.Password)}
          component={renderField}
          type="password"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        {renderError(error)}

        <Button type="submit" variant="contained" color="primary">
          <Translation translation={Translations.Log_in} />
        </Button>
      </fieldset>
    </form>
  );
}

export default reduxForm({
  form: "login",
  onSubmit: loginUser,
  locale: locale, // This doesn't work, locale is undefined
})(Login);

export function loginUser(formValues, dispatch, props) {

  const locale = React.useContext(LocaleContext); // Doesn't work - cannot use hooks here.

  const loginUrl = AuthUrls.LOGIN;

  return axios
    .post(loginUrl, formValues)
    .then((response) => {
      const token = response.data.key;
      dispatch(authLogin(token));
      localStorage.setItem("token", token);
      history.push("/");
    })
    .catch((error) => {
      console.log("how do I get locale here?", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

export function authLogin(token) {
  return {
    type: AuthTypes.LOGIN,
    payload: token,
  };
}

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  useEffect(() => {
    props.initialize({ locale: locale });
  }, [locale]);

  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field
          name="email"
          label="Email"
          component={renderField}
          type="text"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

      <fieldset className="form-group">
        <Field
          name="password"
          label={getTranslation(locale, Translations.Password)}
          component={renderField}
          type="password"
          validate={[
            required({
              message: "this field is required",
            }),
          ]}
        />
      </fieldset>

    <fieldset className="form-group" style={{ display: "none" }}>
      <Field
        name="locale"
        label="locale"
        component={renderField}
        type="text"
        validate={[
          required({
            message: getTranslation(locale, Translations.FieldRequired),
          }),
        ]}
      />
    </fieldset>

    <fieldset className="form-group" style={{ display: "none" }}>
      <Field name="locale" component={renderField} />
    </fieldset>

      <fieldset className="form-group">
        {renderError(error)}

        <Button type="submit" variant="contained" color="primary">
          <Translation translation={Translations.Log_in} />
        </Button>
      </fieldset>
    </form>
  );
}

export default reduxForm({
  form: "login",
  onSubmit: loginUser,
  locale: locale, // This doesn't work, locale is undefined
})(Login);

export function loginUser(formValues, dispatch, props) {

  const locale = formValues.locale; // WORKS!

  const loginUrl = AuthUrls.LOGIN;

  return axios
    .post(loginUrl, formValues)
    .then((response) => {
      const token = response.data.key;
      dispatch(authLogin(token));
      localStorage.setItem("token", token);
      history.push("/");
    })
    .catch((error) => {
      console.log("Locale is here!", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

export function authLogin(token) {
  return {
    type: AuthTypes.LOGIN,
    payload: token,
  };
}

---

我认为最简单的方法是在表单中添加带有

locale

值的隐藏

Field

，它将在

formValues

@Montecamo中提供，这实际上相当聪明。如何创建隐藏字段？：）但更好的解决方案是在操作中抛出一些错误代码，然后在组件中转换此错误代码（只需将

display:none

设置为：）@Montecamo好的，现在我如何为空表单赋值？：）我尝试了value=“…”但这不起作用。我认为最简单的方法是在表单中添加带有

locale

值的隐藏

字段

，它将在

formValues

@Montecamo中提供，这实际上相当聪明。如何创建隐藏字段？：）但更好的解决方案是在操作中抛出一些错误代码，然后在组件中转换此错误代码（只需将

display:none

设置为：）@Montecamo好的，现在我如何为空表单赋值？：）我尝试了value=“…”但这不起作用。