类型错误： 无法解构'Object(...)(...)'的属性'setValues'，因为它未定义。(反应/创建反应应用程序)

Question

我遇到了类型错误：无法解构"对象(...)"的属性"setValues"(...)'因为它是未定义的。错误，我不知道为什么。我有一段来自App.js的代码：

import { DataProvider, useData } from "./DataContext";
function App({ ...rest }) {
const { setValues, data } = useData();
...

和数据上下文.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);

以下是完整代码的CodeSandBox链接：

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

Answer 1

在您的沙盒中，您不使用数据提供程序可能会在您的索引中.js

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

Answer 2

您的 useContext 与从{{ data, setValues }}获取初始数据的DataContext连接。

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

const { data， setValues } = useData();

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

您是否尝试先在应用的一部分中触发DataProvider。

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

我可以看到这是作者希望您使用的，然后在组件内部使用useData.