Реагировать на состояние всегда один шаг позади при получении куки

Question

У меня есть компонент, который отображает значение адреса электронной почты повара ie в браузере, но должен обновляться, если вы передаете новое письмо в URL.

В настоящий момент, если я передаю новое электронное письмо в URL, я вижу, что повар ie обновился, но новое электронное письмо не отображается на странице, отображается только предыдущее.

import React from "react";
import Helper from "plugins/helper";

class emailField extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      cookie: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.updateCookie = this.updateCookie.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.cookie !== this.state.cookie) {
      this.updateCookie();
      return true;
    }
    return false;
  }

  componentDidMount() {
    this.updateCookie();
  }

  updateCookie() {
    const cookie = Helper.getCookie("email");
    const query = window.location.href;
    const emailUrl = query.match(/email=/g);
    if (cookie && emailUrl) this.setState({ cookie });
  }

  handleChange(e) {
    Helper.setCookie("email", e.target.value);
  }

  render() {
    const { cookie } = this.state;
    const { id } = this.props;
    return (
      <div id={id}>
        <div className="row noEmailUrl" style={{ display: "none" }}>
          <div className="col-md-2"></div>
          <div className="col-md-10">
            <input
              className="email form-control emailPrimary"
              placeholder="Please enter your email address"
              name="EMAIL_ADDRESS_"
              value={cookie}
              onChange={this.handleChange}
            />
          </div>
        </div>
        <div className="row emailUrl">
          <div className="col-md-8 emailAddress">
            <span className="email">{cookie}</span>
          </div>
          <div className="col-md-4 editBtn">
            <button type="button" className="changeAddress">
              Edit email
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default emailField;

emailField.defaultProps = {
  id: " "
};

Answer 1

если я передаю новое электронное письмо в URL, я вижу, что повар ie обновился, но новое электронное письмо не отображается на странице, отображается только предыдущее.

Полагаю, это означает, что вы хотите загрузить электронную почту из строки запроса URL, верно? Но я немного запутался, потому что код, который вы предоставляете, загружает только данные от повара ie. Если вы хотите синхронизировать c ввод с URL-адреса, а также сохранить значение в Cook ie, вы можете попробовать что-то вроде этого. Но я думаю, что нам нужно только одно место для сохранения данных электронной почты (строка запроса URL ИЛИ cook ie). Надеюсь, что это может помочь.

import React, { Component } from "react";
import Cookies from "js-cookie";

const COOKIE_KEY = "email";

export default class CookieInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: this.getInitialStateFromCookie()
    };
  }

  getInitialStateFromCookie = () => {
    // if we have email in query string, then set as initial data
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has("email")) {
      const email = urlParams.get("email");
      Cookies.set(COOKIE_KEY, email);

      return email;
    }

    // otherwise, try get data from cookie
    return Cookies.get(COOKIE_KEY) || "";
  };

  handleChange = e => {
    const email = e.target.value;

    // update state, cookie & route when input change
    this.setState({ email });
    Cookies.set(COOKIE_KEY, email);
    window.history.pushState(null, null, `?email=${email}`);
  };

  render() {
    const { email } = this.state;

    return (
      <div>
        <input value={email} onChange={this.handleChange} />
      </div>
    );
  }
}

Answer 2

Что вы делаете, это проверяете состояние, чтобы увидеть, нужно ли вам обновлять состояние.

Вам нужно только один раз вызвать updateCookie, поскольку это не зависит от чего-либо в компоненте.

Удалите переопределение shouldComponentUpdate, так как оно не нужно (и, кроме того, вредно - замедляет рендеринг и имеет побочный эффект, которого не должно быть).