标签: use-context

希望你们在这种情况下一切顺利:) 在 React 应用程序的 App 组件中运行渲染测试时，我在 useContext 中遇到错误。

• 这是上下文 api：

  const { userId } = useContext(UserContext);

• 这是错误：

  TypeError：无法解构“（0，_react.useContext）（...）”的属性“userId”，因为它未定义。

  35 | 35 const { userId } = useContext(UserContext);

该对象一开始是未定义的，因为它是获取 userId 的 API 调用。登录后，用户 ID 可用。因此，在开发中运行时，它可以正常工作，但在运行测试时，它会显示此错误。

• 最后是 UserContext 组件：

  导出 const UserContext = createContext();

   const UserProvider = ({ children }) => {
     const [userId, setUserId] = useState("");
     const getUserId = async () => {
       if (token) {
         await axios
           .get(`${baseURL}/auth/user`, {
             headers: {
               authorization: token
             }
           })
           .then(function …

  Run Code Online (Sandbox Code Playgroud)

我正在尝试开始使用 React 上下文挂钩，但我似乎遇到了一个我不明白的问题。

我定义了一个用户上下文，它只是一个表示“hello user”的字符串，如下所示：

import { useContext, createContext } from "react"

export const UserContext = createContext<string | null>(null)

export interface IAuth {
  children: React.ReactNode;
}

const Auth: React.FC<IAuth> = (props) => {

  return(
    <UserContext.Provider value={"hello user"}>
      {props.children}
    </UserContext.Provider>
  )
}

export default Auth

然后我尝试访问是这样的：

const Dash: NextPage<dashPageProps> = (props) => {

  const contextMsg = useContext(UserContext)

  const submitForm = () => {
    console.log("logout")
  }

  return (
    <Auth>
    <div className="w-screen">
      <div className='text-xl'>
        Dashboard
      </div>
      <h1>{contextMsg}</h1>
      <button className='bg-gray-400 border-2 border-gray-600 w-fit mt-5' …

我正在学习 React 并使用上下文构建一个项目。最初我在 App.js 组件中构建上下文，但我想将其分离到自己的文件中以保持 App.js 更干净。然而，我很难弄清楚这是如何完成的，或者是否可能。我认为我所关注的部分是如何提供上下文。我将新的 Context 文件与 App.js 一起粘贴在下面，并注释掉了原始的 Context 结构。有谁知道我怎样才能做到这一点？

// TaskManipulatorContext
import React, { useReducer } from "react";
import AddTask from "../Components/dnd_components/AddTask";

export const TaskManipulatorContext = React.createContext();

const taskManipulatorInitialState = {
  panelData: {
    height: 50,
    open: false,
    title: "title",
    content: "content",
  },
  newTask: false,
  deleteTask: false,
  taskContainer: null,
};

const taskManipulatorReducer = (state, action) => {
  switch (action.type) {
    case "addTask-botPanel":
      // Brings up bottom panel to add new task
      return {
        ...state,
        panelData: {
          ...state.panelData, …

我正在开发我的第一个 React 项目，但遇到以下问题。我希望我的代码如何工作：

• 我将项目添加到可通过上下文访问的数组中（context.items）
• 我想在组件中运行 useEffect 函数，只要值发生变化，就会显示 context.items

我尝试过的：

1. 将上下文（ 和context）context.items列为 useEffect 中的依赖项

• 这导致组件在值更改时不更新

2. 列出context.items.length

• 然而，这导致组件在数组长度发生变化时更新，而不是在单个项目的值发生变化时更新。

3. 将上下文包装在Object.values(context)

• 结果正是我想要的，除了 React 现在抱怨*传递给 useEffect 的最后一个参数改变了渲染之间的大小。该数组的顺序和大小必须保持不变。*

您知道有什么方法可以修复此 React 警告或在上下文值更改时运行 useEffect 的不同方法吗？

好吧，不想添加代码，希望这对我来说是一些简单的错误，但即使有一些答案，我仍然无法解决这个问题，所以在这里，减少了希望简化。

上下文组件：

const NewOrder = createContext({
  orderItems: [{
    itemId: "",
    name: "",
    amount: 0,
    more:[""]
  }],
  addOrderItem: (newOItem: OrderItem) => {},
  removeOrderItem: (oItemId: string) => {},
  removeAllOrderItems: () => {},
});

export const NewOrderProvider: React.FC = (props) => {
  // state
  const [orderList, setOrderList] = useState<OrderItem[]>([]);

  const …