![](/img/trans.png)
[英]TypeError: Cannot destructure property 'title' of 'pres[0]' as it is undefined. (REACT)
[英]TypeError: Cannot destructure property 'setValues' of 'Object(…)(…)' as it is undefined. (react / create-react-app)
我有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
您的 useContext 與DataContext
連接,后者從{{ data, setValues }}
獲取初始數據。
因此,當您在消費者App
中使用它時,它需要
常量 { 數據,setValues } = useData();
這可能是第一個錯字。 但也許這不是問題所在。
您是否嘗試過在您的應用程序的一部分中首先觸發DataProvider
。
<DataProvider>
<App>
<YOURCOMPONENT />
</App>
</DataProvider>
<DataProvider>
<App2 />
</DataProvider>
我可以看到這是作者希望您使用的,然后在您的組件中使用useData
。
在您的沙箱中,您可能在 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
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.