Не удается установить состояние после сохранения в локальном хранилище в React

Question

Я использую поисковый фильтр в своем приложении, и мне необходимо сохранять данные между обновлениями браузера.

Вот мой код:

    class App extends Component {
  state = {
    data: shop,
    direction: {
      price: "asc",
      title: "asc"
    },
    searchTitle: "",
    searchPrice: {
      min: null,
      max: null
    }
  };

  componentDidUpdate() {
    const state = {
      searchTitle: this.state.searchTitle,
      searchPrice: this.state.searchPrice,
      direction: this.state.direction
    };

    window.localStorage.setItem("saved_state", JSON.stringify(state));
  }

  componentDidMount() {
    const state = JSON.parse(window.localStorage.getItem("saved_state"));

    console.log(state);

    if (state) {
      this.setState({
        searchTitle: state.searchTitle,
        searchPrice: state.searchPrice,
        direction: state.direction
      });
    }
  }

  // PRICE SORT
  priceSort = key => {
    this.setState({
      data: shop.sort(
        this.state.direction[key] === "asc"
          ? (a, b) => parseFloat(a.data[key]) - parseFloat(b.data[key])
          : (a, b) => parseFloat(b.data[key]) - parseFloat(a.data[key])
      ),
      direction: {
        [key]: this.state.direction[key] === "asc" ? "desc" : "asc"
      }
    });
  };

  // OLD PRICE SORT
  oldPriceSort = key => {
    this.setState({
      data: shop.sort(
        this.state.direction[key] === "asc"
          ? (a, b) => parseFloat(a.data[key]) - parseFloat(b.data[key])
          : (a, b) => parseFloat(b.data[key]) - parseFloat(a.data[key])
      ),
      direction: {
        [key]: this.state.direction[key] === "asc" ? "desc" : "asc"
      }
    });
  };

  // TITLE SORT
  titleSort = key => {
    this.setState({
      data: shop.sort(
        this.state.direction[key] === "asc"
          ? (a, b) => a.data[key].localeCompare(b.data[key])
          : (a, b) => b.data[key].localeCompare(a.data[key])
      ),
      direction: {
        [key]: this.state.direction[key] === "asc" ? "desc" : "asc"
      }
    });
  };

  // TITLE FILTER
  updateTitleSearch = event => {
    this.setState({
      searchTitle: event.target.value
    });
    this.titleSearch();
  };

  titleSearch = () => {
    if (this.state.searchTitle) {
      this.setState({
        data: shop
          .filter(item => {
            return (
              item.data.title
                .toLowerCase()
                .indexOf(this.state.searchTitle.toLowerCase()) !== -1
            );
          })
          .sort(
            this.state.direction.title === "asc"
              ? (a, b) => a.data.title.localeCompare(b.data.title)
              : (a, b) => b.data.title.localeCompare(a.data.title)
          )
      });
    }
  };

  // PRICE FILTER
  updateMinSearchPrice = event => {
    this.setState({
      searchPrice: { ...this.state.searchPrice, min: event.target.value }
    });
  };

  updateMaxSearchPrice = event => {
    this.setState({
      searchPrice: { ...this.state.searchPrice, max: event.target.value }
    });
  };

  priceSearch = () => {
    if (this.state.searchPrice.min || this.state.searchPrice.max) {
      this.setState({
        data: shop
          .filter(item => {
            return (
              parseFloat(item.data.price) >= this.state.searchPrice.min &&
              parseFloat(item.data.price) <= this.state.searchPrice.max
            );
          })
          .sort(
            this.state.direction.price === "asc"
              ? (a, b) => parseFloat(a.data.price) - parseFloat(b.data.price)
              : (a, b) => parseFloat(b.data.price) - parseFloat(a.data.price)
          )
      });
    }

    if (!this.state.searchPrice.max) {
      this.setState({
        data: shop.filter(item => {
          return parseFloat(item.data.price) >= this.state.searchPrice.min;
        })
      });
    }
  };

  render() {
    return (
      <div className="page-container">
        <h1>Welcome to ShopMeNow!</h1>
        <Filters
          updateTitleSearch={this.updateTitleSearch}
          titleSearch={this.titleSearch}
          updateMinSearchPrice={this.updateMinSearchPrice}
          updateMaxSearchPrice={this.updateMaxSearchPrice}
          priceSearch={this.priceSearch}
        />
        <ItemTable
          data={this.state.data}
          priceSort={this.priceSort}
          oldPriceSort={this.oldPriceSort}
          titleSort={this.titleSort}
        />
      </div>
    );
  }
}

export default App;

Моя цель - получить сохраненные данные в хуке componentDidMount () . Но, похоже, это не работает (я уже пытался его утешить).

Что мне нужно сделать, чтобы начать? Спасибо, сообщество!

Answer 1

Проблема, я думаю, заключается в том, что вы сохраняете данные в localStorage внутри componentDidUpdate и пытаетесь получить данные из локального хранилища в componentDidMount.

Вы должны понимать, что componentDidMount вызывается перед componentDidUpdate, что означает, что вы читаете данные из локального хранилища перед установкой.

Итак, вам нужно сначала установить данные, а затем прочитать данные

Answer 2

Есть ли конкретная причина, почему вы делаете это в componentDidUpdate? Если нет, я бы предложил перенести эту функцию в отдельную функцию. Как сейчас, все обновления, включая this.setState s на data, которые вы не хотите сохранять в localStorage.

Возможно, вы могли бы подумать о написании функции, которая устанавливает состояние и сохраняет значение localStorage, поскольку ваши функции сортировки уже довольно громоздки.

Пример псевдокода:

setStateWithLocalStorage = newState => {
  const { searchTitle, searchPrice, direction } = this.state;
  this.setState(newState, () => {
      localStorage.setItem('saved_state', { searchTitle, searchPrice, direction })
  })
}

тогда вы можете использовать эту функцию вместо this.setState в ваших функциях сортировки.

Answer 3

вместо установки State в ComponentDidMount, почему бы вам не создать совершенно другую функцию, а затем вызвать эту функцию в ComponentDidMount.

Весь код установки состояния добавляется в эту функцию.Попробуйте это и дайте мне знать, если это работает, ура!

    ComponentDidMount(){ 

       this.changeValues();

   }

   changeValues(){

     const state = JSON.parse(window.localStorage.getItem("saved_state"));

    console.log(state);

    if (state) {
      this.setState({
        searchTitle: state.searchTitle,
        searchPrice: state.searchPrice,
        direction: state.direction
      });
    }

   }