在React中，我需要从本地存储中获取状态，然后根据该状态有条件地设置另一个状态

debugcn 发表于 Dev

贝斯特矿

const  [isDone, setIsDone] = useState({
      customer: undefined, //need to set another state based on this state
      shipping: undefined,
      payment: undefined,
    });

    //Set values of isdone on page load from localstorage if exists else set to false
  useEffect(() => {
    setIsDone({
      customer: localStorage.getItem("customer")
      ? localStorage.getItem("customer")
      : false,
      shipping: localStorage.getItem("shipping")
      ? localStorage.getItem("shipping")
      : false,
      payment: localStorage.getItem("payment")
        ? localStorage.getItem("payment")
        : false,
    });

  //if customer section has not been done,set edit clicked to false
    !isDone.customer && setEditClicked({ ...editClicked, customer: true }); //This code block is 
    getting executed evey time,even though state of isDone.customer is set to "true".i confirmed from 
    react dev tools 
     //
      
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

事情是IsDone.customer在本地存储中保存为“ true”，但是此代码仍无法正常工作。我什至使用Boolean方法将其覆盖为boolen，但结果仍然相同。

这是我将数据保存到localstorage.it的方式，我已经检查过了。

const handleSubmit = (event) => {
const name = event.currentTarget.getAttribute("name");

//save isDone to local storage
localStorage.setItem(name, true);
setEditClicked({ ...editClicked, [name]: false });
 };

丹尼斯·普雷西奇

isDone国家将不会被后立即改变setIsDone的useEffect

最好在内部创建另一个常量 useEffect

useEffect(() => {
    const isDone = {
      customer: localStorage.getItem("customer")
      ? localStorage.getItem("customer")
      : false,
      shipping: localStorage.getItem("shipping")
      ? localStorage.getItem("shipping")
      : false,
      payment: localStorage.getItem("payment")
        ? localStorage.getItem("payment")
        : false,
    }

    setIsDone(isDone);

    !isDone.customer && setEditClicked({ ...editClicked, customer: true });

  }, []);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。