Question

嗨，我正在创建一个gatsby react应用程序，我在此页面上的主要目标是删除一些localStorage并在渲染后重置上下文。 AFTER很重要，因为我希望页面显示一些数据，但是在渲染之后，我想删除该数据。（我在localStorage中有一些数据以保持持久状态）

这有可能吗？
我的第一次尝试是这样的：
- 对于此代码段，如果我注释掉useEffect有意义，则会出现我的组件，但是当我添加useEffect时，它不会呈现我的组件，这是预期的，但不是我想要的:(

const {data, setData} = useContext(context)

useEffect(() => {
  console.log('deleting');
  setData({});
  localStorage.removeItem('data');
}, []);


const components = [];
for (const item in data) {
    if ({}.hasOwnProperty.call(data, item)) {
      const { dataItem } = data[item];
      components.push(<Component dataItem={dataItem} />);
    }
  }


return (
   <div>
     {components}
   <div>
);

我的第二次尝试有点类似，不同之处在于我尝试将数据保存到localState中，以查看即使删除后该数据是否仍将保留，并且我不再在子组件中获取上下文， m而是在父组件中抓取它，并将其作为道具传递给孩子：
- 这里的问题是我的localData始终是一个空对象。但是我的控制台语句显示数据中实际上有数据，但是当我使用State（data）时，我的localData始终是一个空对象。即使我先使用State（{}）然后再设置setlocalData（data），我也会遇到无限循环：（

console.log(data);
const [localData, setlocalData] = useState(data); //this is the same data as in the other snippet
console.log(localCartInfo);

// rest of the code is the same except im now replacing data with localdata

如果知道反应如何真正起作用的任何人可以帮助我，将不胜感激。

Answer 1

好，因此您想在渲染后执行一个动作。好吧，这很棘手，但是可以使用简单的技巧来完成，这是一个有效的示例：

https://codesandbox.io/s/boring-wood-wxmtq?file=/src/App.js

Answer 2

尝试创建本地状态并在其中保留数据，然后再删除数据。

然后呈现该本地状态。

const {data, setData} = useContext(context);
const [value] = useState(data); // initialize on mount with the context value. No need to change that value later on

useEffect(() => {
  console.log('deleting');
  setData({});
  localStorage.removeItem('data');
}, []);


const components = [];
for (const item in value) { // here, read value instead of data
    if ({}.hasOwnProperty.call(data, item)) {
      const { dataItem } = data[item];
      components.push(<Component dataItem={dataItem} />);
    }
  }


return (
   <div>
     {components}
   </div>
);

Answer 3

我最终通过在第一次加载页面时将上下文数据保存到cookie中来解决了这个问题。这比设置localState更好，因为它不需要重新加载组件来设置cookie，并且由于可能使cookie过期，因此无论如何它对于我的用例来说都更好。

我这样做是这样的：

let localData = {};

const {data, setData} = useContext(dataContext);

if (Object.keys(data).length > 0) {
      // create cookie with existing data before it gets deleted
      const cookieString = `localData=${JSON.stringify(data)}`;
      document.cookie = cookieString;
      localData = data;
    } else {
      // if data doesn't exist, get the data from the localData cookie
      localData = JSON.parse(document.cookie.substring(10));
    }

尝试使用useContext值设置状态

3 个答案: