作为Context提供者的值属性传递的对象在每次渲染时都会发生变化。

Question

我遇到了这个错误:

src/index.js 第9行第36列：传递给上下文提供程序的值属性（位于第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')
);

- Alex Kuzmin

---

你解决了吗？我遇到了同样的问题。 - undefined

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>)
}

- Tommy

---

在渲染树的这个高级别上，这真的有必要吗？我会这样做来让eslint满意，但我想知道它是否真的必要。 - undefined

Answer 2

我曾经遇到过同样的问题，但并不想使用'useMemo'。相反，我将这个eslint命令粘贴在相关代码行上方，以禁用eslint标志。

    // eslint-disable-next-line react/jsx-no-constructed-context-values

这样我就能够无问题地部署了。

- RubberDucky73

Answer 3

你可以使用以下代码片段进一步简化它：

const FireBaseWrapper = () =>
  <FirebaseContext.Provider value={useMemo(() => ({ firebase, FieldValue }), [firebase, FieldValue])}>
    <App />
  </FirebaseContext.Provider>;

- Amanuel Tesfaye