当道具没有改变时，React备忘录会保持渲染

我有一个无状态的功能组件，它没有道具，并且从React上下文中填充内容。作为参考，我的应用程序使用NextJS，并且是一个同构应用程序。我试图在这个组件上第一次使用React.memo（），但是它始终在客户端页面更改时重新呈现，尽管道具和上下文没有更改。我知道这是由于我放置了控制台日志。

我组件的一个简单示例是：

const Footer = React.memo(() => {
  const globalSettings = useContext(GlobalSettingsContext);
  console.log('Should only see this once');

  return (
    <div>
      {globalSettings.footerTitle}
    </div>
  );
});

我什至尝试没有运气地传递第二个参数：

const Footer = React.memo(() => {
  ...
}, () => true);

任何想法出什么事了吗？

编辑：上下文提供程序的用法_app.js如下所示：

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    ...
    return { globalSettings };
  }

  render() {    
    return (
      <Container>
        <GlobalSettingsProvider settings={this.props.globalSettings}>
          ...
        </GlobalSettingsProvider>
      </Container>
    );
  }
}

实际的GlobalSettingsContext文件如下所示：

class GlobalSettingsProvider extends Component {
  constructor(props) {
    super(props);
    const { settings } = this.props;
    this.state = { value: settings };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        {this.props.children}
      </Provider>
    );
  }
}

export default GlobalSettingsContext;
export { GlobalSettingsConsumer, GlobalSettingsProvider };

// MyContext.jsx // exported for when you really want to use useContext(); export const MyContext = React.createContext(); // Provides values to the consumer export function MyContextProvider(props){ const [state, setState] = React.useState(); const [otherValue, setOtherValue] = React.useState(); return <MyContext.Provider value={{state, setState, otherValue, setOtherValue}} {...props} /> } // HOC that provides the value to the component passed. export function withMyContext(Component){ <MyContext.Consumer>{(value) => <Component {...value} />}</MyContext.Consumer> } // MyComponent.jsx const MyComponent = ({state}) => { // do something with state } // compares stringified state to determine whether to render or not. This is // specific to this component because we only care about when state changes, // not otherValue const areEqual = ({state:prev}, {state:next}) => JSON.stringify(prev) !== JSON.stringify(next) // wraps the context and memo and will prevent unnecessary // re-renders when otherValue changes in MyContext. export default React.memo(withMyContext(MyComponent), areEqual)