react-usememo - 作为 value 属性传递给 Context 提供程序的对象在每次渲染时都会更改

Question

任何人都可以帮我解决这个问题。我有这个错误：

src/index.js 第 9:36 行：作为 value 属性传递给 Context 提供者的对象（第 9 行）每次渲染都会改变。要解决此问题，请考虑将其包装在 useMemo 挂钩中 react/jsx-no-constructed-context-values

在这种情况下，我不确定如何使用 useMemo。

import ReactDOM from 'react-dom';
import App from './App';
import FirebaseContext from './context/firebase';
import { firebase, FieldValue } from './lib/firebase';
import './styles/app.css';

ReactDOM.render(
  <FirebaseContext.Provider value={{ firebase, FieldValue }}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root')
);

Answer 1

我认为您需要FireBaseContext从另一个组件返回。在那个组件中，你可以做useMemo一些让 ESLint 高兴的事情。

类似下面的东西（我没有测试这个）

import { useMemo } from "react";
import ReactDOM from 'react-dom';
import App from './App';
import FirebaseContext from './context/firebase';
import { firebase, FieldValue } from './lib/firebase';
import './styles/app.css';


ReactDOM.render(
  <FireBaseWrapper />,
  document.getElementById('root')
);

const FireBaseWrapper = () => {
  const fireBaseProviderValue= useMemo(() => ({ firebase, FieldValue }), [firebase, FieldValue]);

return (<FirebaseContext.Provider value={fireBaseProviderValue}>
    <App />
  </FirebaseContext.Provider>)
}