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

Question

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”，但此代码仍然不是 working.i 甚至使用布尔方法将其转换为布尔值，但结果仍然相同。

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

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

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

Answer 1

http://prntscr.com/106dqqr

localStorage 正在处理字符串，因此，您需要使用 JOSN.parse 和 JSON.stringfy

JSON.stringify(false)
"false"
JSON.parse("false")
false

var c = localStorage.getItem("customer")
var s = localStorage.getItem("shipping")
var p = localStorage.getItem("payment")

...
 setIsDone({
      customer: c
      ? JSON.parse(c)
      : false,
      shipping: s
      ? JSON.parse(s)
      : false,
      payment: p
        ? JSON.parse(p)
        : false,
    });

...
//save isDone to local storage
localStorage.setItem(name, JSON.stringfy(true));

Answer 2

isDone 状态不会在 useEffect

setIsDone 之后立即改变

最好在里面再创建一个常量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 });

  }, []);

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

in React i need to get the state from local storage and then set another state conditionally based on this state

javascript

state

local-storage

reactjs