作为 value prop 传递给 Context 提供者的对象在每次渲染时都会发生变化

Question

我有这个错误：

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

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

import React 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(
  <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>)
}