TypeError:无法解构“对象(...)(...)”的属性“setValues”,因为它未定义。 (反应/创建反应应用)
Posted
技术标签:
【中文标题】TypeError:无法解构“对象(...)(...)”的属性“setValues”,因为它未定义。 (反应/创建反应应用)【英文标题】:TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' as it is undefined. (react / create-react-app) 【发布时间】:2021-08-05 11:58:21 【问题描述】:我遇到 TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' 因为它是未定义的。 错误,我不知道为什么。我有一段来自 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);
这里是完整代码的 CodeSandBox 链接:
https://codesandbox.io/s/react-app-test-wvmlp?file=/src/App.js
【问题讨论】:
哪一行导致错误? 看起来您正在访问在注入上下文提供程序的同一组件中读取 che 上下文的钩子,因此那里没有可用的 comtext。首先用提供者包装一个组件,然后在包装的组件内,调用钩子以从上下文中读取 @quirimmo 请改正你的错别字 @CodeApprentice 我正在打电话,但我希望这个想法很清楚,他正在访问应用程序中的上下文,它很可能会在其中注入它。所以他正在访问一个尚不可用的上下文。上下文的值未定义,您正在访问未定义的道具(setValue) 【参考方案1】:在您的沙箱中,您可能在 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
);
【讨论】:
宾果游戏,这就是我的问题加一个 长期以来一直试图通过 cmets 说同样的话 谢谢@quirimmo imy bad I just looking at the sandbox 哈哈,我没看他的代码,想象一下。所以也许就是这样。 感谢您指出这一点。我添加了缺少的代码,但它给出了另一个未定义的错误:Cannot read property 'textField' of undefined【参考方案2】:您的 useContext 与 DataContext
连接,它从 data, setValues
获取初始数据。
因此当你在消费者App
中使用它时,它需要是
const 数据,setValues = useData();
这可能是第一个错字。但也许这不是问题所在。
您是否尝试过在您的应用程序的某个部分首先触发 DataProvider
。
<DataProvider>
<App>
<YOURCOMPONENT />
</App>
</DataProvider>
<DataProvider>
<App2 />
</DataProvider>
我可以看到这是作者希望你使用的,然后在你的组件中,使用useData
。
【讨论】:
如果是这种情况,虽然错字,他会有 "setValues is not a function" 。无法访问未定义的道具意味着他解构的对象是未定义的,因此甚至还没有检查错别字 您可能是对的, 顺序无关紧要。让我考虑一下。 检查我的评论,即使我不关心积分。他只是在读取一个不可用的上下文,因为他调用了将注入上下文的同一 App 组件中的钩子 也许他忘记了您提到的Provider
,但也许Provider
已在应用程序的其他部分触发。因为这件作品雄心勃勃。
不,因为 App.tsx 中有提供程序的导入,并且有沙箱 :)以上是关于TypeError:无法解构“对象(...)(...)”的属性“setValues”,因为它未定义。 (反应/创建反应应用)的主要内容,如果未能解决你的问题,请参考以下文章
TypeError:无法解构“未定义”或“空”的属性“记录器”
Nestjs Swagger UnhandledPromiseRejectionWarning:TypeError:无法解构“未定义”或“空”的属性“原型”
TypeError:无效的解构不可迭代实例的尝试。为了可迭代,非数组对象必须有一个 [Symbol.iterator]()