useEffect不使用本地存储和forEach

Question

在我的项目中，我正在使用redux存储，该数据将存储在本地存储中。在每一个新的更新中，本地存储都会更新，并且根据本地存储，我的组件将使用forEach方法呈现。

使用下面的代码，我将从本地存储中获取数据。

const ShowMyFlashcard = () => {
let cardValueObj=[]

 useEffect(() => {

    let cardValue = localStorage.getItem("cardValue");
    if (cardValue == null) {
      cardValueObj= [];
    } else {
      cardValueObj= JSON.parse(cardValue);
    }
  });


 return (
    //  {/* SECTION TO SHOW CREATED ALL CARDS*/}

    <div className="mx-10 my-10 grid grid-cols-3 gap-4 place-content-around flex flex-wrap justify-items-center">
      {cardValueObj.forEach((element) => {
        <div className=" shadow-md bg-white p-5 h-64 w-64 m-4 mx-1.5 my-1.5">
          <div>
            <h1 className="text-center font-bold mx-1.5 my-1.5">
              {element.createGroup}
            </h1>
            <div className="text-center bg-white mx-1.5 my-1.5 h-32 w-48">
              <span>{element.groupDescription}</span>
            </div>
            <div className="flex justify-center">
              <button className="rounded-md text-red-600 border-solid border-2 bg-white border-red-700 mx-2 my-2 h-8 w-40">
                View Cards
              </button>
            </div>
          </div>
        </div>;
      })}
    </div>
  );
};

出口违约ShowMyFlashcard；

Answer 1

您还没有传递任何依赖数组

const [cardValue, setCardValue] = useState([]);

useEffect(() => {
   let cardValueFromLocalStorage = localStorage.getItem("cardValue");
   if (cardValueFromLocalStorage === null) {
     setCardValue([]);
   } else {
     setCardValue(JSON.parse(cardValueFromLocalStorage));
   }}, []);

在数组中添加一些依赖项。同时，使用let也不是一种正确的方法，尝试使用useState钩子

Answer 2

.forEach()没有返回值，因此操作不会向页面输出任何内容。使用.map()代替。

此外，对.forEach()的回调从不返回任何内容。使用.map()时，还要确保回调返回所需的值。

{cardValueObj.map((element) => (
  <div className=" shadow-md bg-white p-5 h-64 w-64 m-4 mx-1.5 my-1.5">
    the rest of your markup...
  </div>;
))}

或者使用显式return

{cardValueObj.map((element) => {
  return (<div className=" shadow-md bg-white p-5 h-64 w-64 m-4 mx-1.5 my-1.5">
    the rest of your markup...
  </div>);
})}