TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' as it is undefined. (react / create-react-app)

Question

我有 TypeError: Cannot destructure 属性 'setValues' of 'Object(...)(...)' as it is undefined. 错误，我不确定为什么.我有一段代码来自 App.js:

import { DataProvider, useData } from "./DataContext";

function App({ ...rest }) {

  const { setValues, data } = useData();

...

和DataContext.js

import React, { createContext, useState, useContext } from "react";

const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [data, setData] = useState({});

  const setValues = (values) => {
    setData((prevData) => ({
      ...prevData,
      ...values
    }));
  };

  return (
    <DataContext.Provider value={{ data, setValues }}>
      {children}
    </DataContext.Provider>
  );
};

export const useData = () => useContext(DataContext);

这里是完整代码的 CodeSandBoxlink：

https://codesandbox.io/s/react-app-test-wvmlp?file=/src/App.js

Answer 1

您的 useContext 与 DataContext 连接，它从 {{ data, setValues }}.

获取初始数据

因此，当您在消费者 App 中使用它时，它需要

const { 数据，setValues } = useData();

这可能是第一个错字。但也许这不是问题所在。

您是否尝试过像在您的应用程序的一部分中那样首先触发 DataProvider。

  <DataProvider>
     <App>
        <YOURCOMPONENT />
     </App>
  </DataProvider>
  <DataProvider>
     <App2 />
  </DataProvider>

我可以看到这是作者想让你使用的，然后在你的组件中，使用useData。

Answer 2

在您的沙箱中，您可能在 Index.js

中不使用 DataProvider

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { DataProvider} from "./DataContext";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
   <DataProvider>
    <App />
   </DataProvider>
  </StrictMode>,
  rootElement
);

TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' as it is undefined. (react / create-react-app)

TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' as it is undefined. (react / create-react-app)

javascript

reactjs

create-react-app