React 组件和本地存储答案

【问题标题】：React Components and Local storageReact 组件和本地存储
【发布时间】：2021-10-29 16:13:11
【问题描述】：

我正在做一个 reactJS 项目，我想将搜索（过滤）的数据从一个页面转移到另一个页面。我使用本地存储来帮助我解决这个问题。首先，我在 db 中创建一个 req 并获得想要的房屋，然后将它们保存在本地存储中。在搜索页面的另一个组件中，我从本地存储中设置状态值。diagram 我有两个问题：

我这样做是为了在将本地存储中的过滤数据设置为重定向到搜索页面后单击主页中的搜索按钮但由于某种原因它显示“无法读取 null 的属性 'map'”
在使用效果中，我做了一个 if 条件来检查本地存储中的数据是否存在。如果它没有显示所有数据并将其设置为本地存储以便稍后搜索（现在不是很重要）如果我重新加载页面它工作正常但状态具有旧值我尝试调试，但找不到问题

//this is the search button 
   
<div className="search-btn-container">
          <Link to="/rent">
            <button
              className="item2-search-button"
              onClick={() => {
                search(price.min, price.max, location, parseInt(rooms, 10));
              }}
            >
              Search
            </button>
          </Link>
        </div>

//this is the display component
   
export default function Search component(match) {
  const [homes, setHomes] = useState(
    JSON.parse(localStorage.getItem("searchedApi"))
  );
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (localStorage.getItem("searchedApi") === undefined) {
      axios
        .get("/link")
        .then((res) => {
          const info = res.data;
          setHomes(res.data);
          localStorage.setItem("searchedApi", res.data);
          setLoading(false);
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      setLoading(false);
    }
  }, []);

  return (
    <div className="homes-component">
      <div className="homes-component-content">
        <form action="" className="homes-component-select">
          <label htmlFor="sort">Sort By: </label>
          <select name="sort" id="sort">
            <option value="Price">Price</option>
          </select>
        </form>
        <div className="homes-grid">
          {loading ? (
            <LoadingCard />
          ) : (
            homes.map((home) => {
              return (
                <div className="homes-grid-item" key={home._id}>
                  {home.premium ? (
                    <img className="premium-logo" src={IMG1} alt="" />
                  ) : (
                    <></>
                  )}
                  <img className="homes-grid-img" src={home.img} alt="lol" />

                  <div
                    className={
                      home.premium
                        ? "home-item-info home-sub-Prem"
                        : "home-item-info home-sub-Norm"
                    }
                  >
                    <p>
                      <img src={IMG} alt="" />
                      Rruga: {home.adress.rruga}
                    </p>
                    {home.description}
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

【问题讨论】：

LocalStorage 仅在页面呈现时可用。所以你应该在 useEffect 中使用它。更改您的代码 const [homes, setHomes] = useState([]); 并在 useEffect 中添加 setHomes(JSON.parse(localStorage.getItem("searchedApi")))
试过了还是不行
为什么要使用 localStorage 将数据从一个组件传递到另一个组件？为什么不使用props？
我认为这是最好的主意（我只是一名初级开发人员），因为按钮位于第一页的子组件中，而我要显示数据的组件位于搜索页面。所以我认为这是最简单的方法。

标签： javascript reactjs local-storage

【解决方案1】：

我认为您需要编辑 useEffect 并且您需要在其中调用本地存储

你的代码会是这样的：

export default function Search component(match) {
  const [homes, setHomes] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (localStorage.getItem("searchedApi") === undefined) {
      axios
        .get("/link")
        .then((res) => {
          const info = res.data;
          setHomes(res.data);
          localStorage.setItem("searchedApi", res.data);
          setLoading(false);
        })
        .catch(function (error) {
          console.log(error);
        });
    } else {
      // if there is data in local storage 
      setHomes(JSON.parse(localStorage.getItem("searchedApi")))
      setLoading(false);
    }
  }, []);

  return (
// the rest of the code ...

【讨论】：