将状态保存到 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() 挂钩中获取保存的数据。但它似乎不起作用（我已经尝试过 console.log 它）

我必须做些什么才能让它继续下去？感谢社区！

Answer 1

与其在 ComponentDidMount 中设置 State ，不如创建一个完全不同的函数，然后在 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
      });
    }

   }

Answer 2

我认为的问题是您将数据保存在 componentDidUpdate 内的 localStorage 中，并且您试图从 componentDidMount 中的本地存储中获取数据。

您需要了解 componentDidMount 在 componentDidUpdate 之前调用，这意味着您在设置之前正在从本地存储中读取数据。

所以需要先设置数据，再读取数据

Answer 3

您在 componentDidUpdate 中这样做有什么特别的原因吗？如果没有，我建议将该功能移至单独的功能。现在的情况，任何更新，包括 data 上的 this.setStates，您不想保存到 localStorage。

也许您可能会考虑编写一个设置状态并保存到 localStorage 的函数，因为您的排序函数已经相当庞大了。

示例伪代码：

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

那么你可以在你的排序函数上使用这个函数而不是this.setState。