如何使用按钮重置/清除 React Context答案

【问题标题】：How to reset/clear React Context with a button如何使用按钮重置/清除 React Context
【发布时间】：2021-03-24 17:28:02
【问题描述】：

即使我在上下文文件中将状态设置为 null，我也无法清除上下文。谁能告诉我我的代码有什么问题？这是我的代码：

import React, { createContext, useState } from 'react';

export const MembersContext = createContext([{}, () => {}]);

export const MembersProvider = ({ children }) => {
  const [members, setMembers] = useState(null);
  const refreshMembers = async () => {
    try {
      const data = await request('api/members');
      setMembers(data);
    } catch (error) {
      console.log('ERROR: ', error);
    }
  };

  const clearMembers = () => {
    setMembers(null);
    console.log('CLEARED MEMBERS IN CONTEXT FILE', members); // not cleared
  };

  return (
    <MembersContext.Provider
      value={{
        members,
        clearMembers,
      }}
    >
      {children}
    </MembersContext.Provider>
  );
};

然后在我的退出页面中，我有一个使用清除上下文功能的按钮：

import React, { useContext } from 'react';
import {
  Button,
} from 'react-native';
import { MembersContext } from '../MembersContext';

const Settings = () => {
  const { clearMembers, members } = useContext(MembersContext);
 
  const clearContext = () => {
    clearMembers();
    console.log('CLEARED MEMBERS?: ', members); // not cleared
    //logout()
  };

  return (
   <Button onPress={()=> clearContext()}>Log Out</Button>
  );
};

export default Settings;

我的控制台日志和屏幕仍然显示上一个会话的数据。

【问题讨论】：

嗨，Jae。你能把这个上传到codesandbox吗？

标签： reactjs react-native

【解决方案1】：

让我们看看这两种情况：-

console.log('CLEARED MEMBERS?: ', members); // not cleared - 在这里，您没有记录将更新的 members 的值，而是 clearContext() 关闭的 members 的值，即当前状态值（更新前）。
console.log('CLEARED MEMBERS IN CONTEXT FILE', members); // not cleared - 这不是查看 members 是否更改的正确方法。国家更新是async。更新后做console.log(...) members 不起作用。我认为原因与上述相同。它不起作用，因为clearMembers() 函数关闭了members 的当前值。

对members 的每次更新也会产生一个新的clearMembers()/clearContext()（由于重新渲染），至少在这种情况下是这样。这就是为什么这些函数总是可以访问最新状态的原因。

要检查members 是否实际更新，请将值记录在Settings 的函数体 或useEffect 内部，members 在它的依赖数组.

【讨论】：