TypeError：无法解构“对象（...）（...）”的属性“setValues”，因为它未定义。（反应/创建反应应用）答案

【问题标题】：TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' as it is undefined. (react / create-react-app)TypeError：无法解构“对象（...）（...）”的属性“setValues”，因为它未定义。（反应/创建反应应用）
【发布时间】：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）

标签： javascript reactjs create-react-app

【解决方案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 中有提供程序的导入，并且有沙箱 :)