Javascript TypeError:无法分解属性'；设置值'；属于'；对象（…）（…）和#x27；因为它是未定义的。（反应/创建反应应用程序）

我遇到类型错误：无法对“Object（…）（…）”的属性“setValues”进行分解，因为它未定义。错误，我不确定原因。我有一段来自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);

import React，{createContext，useState，useContext}来自“React”；
const DataContext=createContext（）；
导出常量数据提供程序=（{children}）=>{
const[data，setData]=useState（{}）；
常量设置值=（值）=>{
setData（（prevData）=>({
…以前的数据，
价值观
}));
};
返回(
{儿童}
);
};
export const useData=（）=>useContext（DataContext）；

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

---

您的useContext与

DataContext

连接，它从

{{data，setValues}

获取初始数据

因此，当您在消费者

应用程序中使用它时，需要

const{data，setValues}=useData（）

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

您是否已尝试在应用程序的某个部分中首先启动
数据提供程序

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



我可以看到这是作者希望您使用的，然后在组件内部使用
useData
您的usedcontext与
DataContext
连接，它从
{data，setValues}
获取初始数据

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

const{data，setValues}=useData（）

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

您是否已尝试在应用程序的某个部分中首先启动
数据提供程序

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



我可以看出这是作者希望您使用的，然后在组件内部，在沙箱中使用
useData
在Index.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
);


从“react”导入{StrictMode}；
从“react dom”导入react dom；
从“/DataContext”导入{DataProvider}；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
在您的沙箱中，您可能在Index.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
);


从“react”导入{StrictMode}；
从“react dom”导入react dom；
从“/DataContext”导入{DataProvider}；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
哪一行导致错误？看起来您正在注入上下文提供程序的同一组件中访问钩子读取上下文，因此那里没有可用的comtext。首先用提供者包装一个组件，然后在包装好的组件内部，调用钩子从context@quirimmo请把你的头发修好typos@CodeApprentice我是通过电话联系的，但我希望这个想法是明确的，他正在访问应用程序中的上下文，很可能它会在其中注入上下文。因此，他正在访问一个尚不可用的上下文。上下文的值未定义，您正在访问一个未定义的prop（setValue），该行导致了错误？看起来您正在访问插入上下文提供程序的同一组件中的钩子读取che上下文，因此comtext在此不可用。首先用提供者包装一个组件，然后在包装好的组件内部，调用钩子从context@quirimmo请把你的头发修好typos@CodeApprentice我是通过电话联系的，但我希望这个想法是明确的，他正在访问应用程序中的上下文，很可能它会在其中注入上下文。因此，他正在访问一个尚不可用的上下文。上下文的值未定义，您正在访问未定义的prop（setValue）。如果是这种情况，尽管输入错误，他会说“setValues不是函数”。拥有无法访问undefined属性意味着他分解的对象是未定义的，因此对拼写错误的检查甚至不会发生。你可能是对的，{}顺序无关紧要。让我想想。检查我的评论，即使我不在乎要点。他只是读取了一个不可用的上下文，因为他调用了同一个应用程序组件中的钩子，该组件将注入上下文。也许他忘记了你提到的
提供者
，但可能
提供者
已经在应用程序的其他部分启动了。因为这篇文章很有野心。不，因为App.tsx中有提供者的导入，还有沙盒：）如果是这样，尽管输入错误，他会说“setValues不是函数”。拥有无法访问undefined属性意味着他分解的对象是未定义的，因此对拼写错误的检查甚至不会发生。你可能是对的，{}顺序无关紧要。让我想想。检查我的评论，即使我不在乎要点。他只是读取了一个不可用的上下文，因为他调用了同一个应用程序组件中的钩子，该组件将注入上下文。也许他忘记了你提到的
提供者
，但可能
提供者
已经在应用程序的其他部分启动了。因为这篇文章很有野心。不，因为App.tsx中有提供者的导入，还有沙盒：）宾果，这就是问题，再加上一个问题，通过评论说同样的话，因为longThank you@quirimmo imy bad我只是看了沙盒哈哈，我没有读他的代码，想象一下。也许就是这样。谢谢你指出这一点。我添加了缺少的代码，但它给出了另一个未定义的错误：无法读取undefinedbingo的属性“textField”，这是问题的另一个原因，通过注释度量说相同的内容，因为longThank you@Qurimmo imy bad我只是看了沙盒哈哈，我没有读他的代码，想象一下。也许就是这样。谢谢你指点我