无法 运行 上下文中的函数

Question

我有一个上下文，我将它导入到我的功能组件中：

import { TaskContexts } from "../../../contexts";

上下文存储数据和函数。

数据来自上下文并显示在站点上。

const {
    editTodo,
    setEditID,
    toggleTodoCompletion,
    editID,
    editTodoHandler,
    removeTodo,
    state,
    text,
    isEditError,
 } = useContext(TaskContexts);

但是！

<button onClick={() => editTodo(todo.id)}>
   <img src={editIcon} alt="edit button"></img>
</button>

当我尝试调用 editTodo 函数时，它失败并出现以下错误：

Uncaught TypeError: editTodo is not a function

如何解决这个错误？

UPD.

完整组件代码

import React, { useState } from 'react';
import ACTION_TYPES from '../ToDo/reducer/actionTypes';
import RenderedTable from './RenderedTable';
import styles from './TaskList.module.scss';
import allIcon from '../../icons/all.svg';
import completedIcon from '../../icons/completed.svg';
import notCompletedIcon from '../../icons/notCompleted.svg';
import mona from '../../icons/mona.gif';
import { TODO_TASK_CHEMA } from '../../utils/validationSchemas';
import { TaskContexts } from '../../contexts';

const TaskList = props => {
  const {
    reducerData: [state, dispatch],
  } = props;

  const [editID, setEditID] = useState(null);
  const [editText, setEditText] = useState(null);
  const [isEditError, setIsEditError] = useState(false);
  const [mode, setMode] = useState('All');

  const removeTodo = id => {
    dispatch({ type: ACTION_TYPES.REMOVE, id });
  };

  const toggleTodoCompletion = id => {
    dispatch({ type: ACTION_TYPES.TOGGLE, id });
  };

  const editTodo = id => {
    const text = editText.trim();

    try {
      TODO_TASK_CHEMA.validateSync({ text });
    } catch (e) {
      setIsEditError(true);
      throw new Error(e);
    }

    setIsEditError(false);
    setEditID(null);
    dispatch({ type: ACTION_TYPES.EDIT, id, text });
    setEditText(null);
  };

  const editTodoHandler = ({ target: { value } }) => {
    setEditText(value);
  };

  const contextsValues = {
    editID,
    setEditID,
    editText,
    setEditText,
    isEditError,
    setIsEditError,
    mode,
    setMode,
    state
  };

  return (
    <TaskContexts.Provider value={contextsValues}>
      <div className={styles.container}>
        {state.todos.length === 0 ? (
          <div>
            <h2 className={styles.noTask}>No tasks =)</h2>
            <img src={mona} alt='mona gif' />
          </div>
        ) : (
          <>
            <button
              className={styles.section}
              onClick={() => {
                setMode('All');
              }}
            >
              <img src={allIcon} alt='all button' />- All
            </button>
            <button
              className={styles.section}
              onClick={() => {
                setMode('Completed');
              }}
            >
              <img src={completedIcon} alt='completed button' />- Completed
            </button>
            <button
              className={styles.section}
              onClick={() => {
                setMode('NotCompleted');
              }}
            >
              <img src={notCompletedIcon} alt='not completed button' />- Not
              completed
            </button>

            <RenderedTable
              editTodo={editTodo}
              setEditID={setEditID}
              toggleTodoCompletion={toggleTodoCompletion}
              editID={editID}
              editTodoHandler={editTodoHandler}
              removeTodo={removeTodo}
              state={state}
              mode={mode}
              isEditError={isEditError}
            />
          </>
        )}
      </div>
    </TaskContexts.Provider>
  );
};

export default TaskList;

此组件上的所有功能都不起作用。但这些都是功能。我不明白为什么 React 不这么认为。

Answer 1

您需要做 3 件事才能成功传递上下文值：

• 将上下文提供者放置在使用组件之上至少一级。
• 创建您的上下文，在上下文中声明所有变量和方法，并在通过 value 属性后导出上下文的提供程序。
• 通过在 TaskList.jsx/TaskList.js 中导入 useContext() 挂钩并在 Provider 对象上调用它来使用上下文值。

将上下文提供者放置在使用组件之上至少一级

JavaScript 认为 editTodo 不是函数或未定义的原因是您正试图在 [=18 内的 React 中使用它=] 之前的组件 (<TaskList/>) 甚至可以感知上下文。当 <TaskList/> 被 React 渲染时，传递任何上下文值都为时已晚。因此，我们需要将上下文放置在组件树更高的某个位置，让 React 在渲染（并将上下文值传递给）树下的子组件之前提前了解上下文及其值。

要解决此问题，请将上下文提供程序包装器放置在使用上下文提供程序值的组件之上至少一个级别。如果不止一个组件需要来自提供者的值，那么放置提供者包装器的最佳位置是在您的 App.jsx/App.js 或 index.jsx/index.js 中 文件。

里面App.jsx/App.js:

import { TaskProvider } from 'path/to/context';

function App() { 
  <TaskProvider>
    {/* All your code/rendered elements/rendered route elements go here */}
  </TaskProvider>
} 

export default App; 

或内部index.jsx/index.js:

import React from "react";
import ReactDOM from "react-dom";
import { ToastProvider } from "path/to/context";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

我将向您展示一种传递这些上下文值的更好方法。

创建您的上下文，声明上下文中的所有变量和方法，并在传递 value 属性后导出上下文的提供程序：

里面TaskContexts.jsx/TaskContexts.js:

import {useContext, createContext } from "react"; 
// ...All your necessary imports

// Create context first
const TaskContexts = createContext();

export const TaskProvider = ({ children }) => { 

  const [editID, setEditID] = useState(null);
  const [editText, setEditText] = useState(null);
  const [isEditError, setIsEditError] = useState(false);
  const [mode, setMode] = useState('All');

  const removeTodo = id => {
    dispatch({ type: ACTION_TYPES.REMOVE, id });
  };

  const toggleTodoCompletion = id => {
    dispatch({ type: ACTION_TYPES.TOGGLE, id });
  };

  const editTodo = id => {
    const text = editText.trim();

    try {
      TODO_TASK_CHEMA.validateSync({ text });
    } catch (e) {
      setIsEditError(true);
      throw new Error(e);
    }

    setIsEditError(false);
    setEditID(null);
    dispatch({ type: ACTION_TYPES.EDIT, id, text });
    setEditText(null);
  };
  
  // ...and the rest of the methods

  // Prepare your contextValues object here
  const contextValues = {
    editID,
    setEditID,
    // ...and the rest
  };

  // Notice that we have called the provider here
  // so that we don't have to do it within the `App.jsx` or `index.jsx`. 
  // We have also passed the default values here so we can that 
  // we don't have to export them and pass them in `App.jsx`. 
  // We used component composition to create a `hole` where the rest of 
  // our app, i.e, `{children}` will go in and returned the 
  // composed component from here, i.e, `<TaskProvider/>`. 
  // This is so that all the preparation of the context Provider object 
  // gets done in one file.
  return (<TaskContexts.Provider value={contextValues}>
              {children}
          </TaskContexts.Provider>);
};

// Now, use the context, we will export it in a function called `useTask()` 
// so that we don't have to call `useContext(TaskContexts)` every time we need values from the context. 

// This function will call `useContext()` for us and return the values 
// in the provider available as long as we wrap our app components 
// with the provider (which we have already done).

export function useTask() {
  return useContext(TaskContexts);
}

通过在 TaskList.jsx/TaskList.js 中导入 useContext() 挂钩并在 Provider 对象上调用它来使用上下文值。

因为我们已经在提供者对象上调用了 useContext，所以我们只需要从之前的 TaskList.jsx 中导入 useTask()，运行 它就会 return 我们可以解构的 contextValues 对象。

import React, { useState } from 'react';
import ACTION_TYPES from '../ToDo/reducer/actionTypes';
import RenderedTable from './RenderedTable';
import styles from './TaskList.module.scss';
import allIcon from '../../icons/all.svg';
import completedIcon from '../../icons/completed.svg';
import notCompletedIcon from '../../icons/notCompleted.svg';
import mona from '../../icons/mona.gif';
import { TODO_TASK_CHEMA } from '../../utils/validationSchemas';

// Import `useTask` only.
import { useTask } from '../../contexts';

const TaskList = props => { 

  // Values from context 
  const {editID, setEditID,...} = useTask();

  const {
    reducerData: [state, dispatch],
  } = props;

  const [editID, setEditID] = useState(null);
  const [editText, setEditText] = useState(null);
  const [isEditError, setIsEditError] = useState(false);
  const [mode, setMode] = useState('All'); 

  const removeTodo = id => {
    dispatch({ type: ACTION_TYPES.REMOVE, id });
  };

  const toggleTodoCompletion = id => {
    dispatch({ type: ACTION_TYPES.TOGGLE, id });
  };

  const editTodo = id => {
    const text = editText.trim();

    try {
      TODO_TASK_CHEMA.validateSync({ text });
    } catch (e) {
      setIsEditError(true);
      throw new Error(e);
    }

    setIsEditError(false);
    setEditID(null);
    dispatch({ type: ACTION_TYPES.EDIT, id, text });
    setEditText(null);
  };

  const editTodoHandler = ({ target: { value } }) => {
    setEditText(value);
  };

  return (
      <div className={styles.container}>
          {/*...everything else */}

          <RenderedTable
              editTodo={editTodo}
              setEditID={setEditID}
              toggleTodoCompletion={toggleTodoCompletion}
              editID={editID}
              editTodoHandler={editTodoHandler}
              removeTodo={removeTodo}
              state={state}
              mode={mode}
              isEditError={isEditError}
            />
          </>
        )}
      </div>
  );
};

export default TaskList; 

总而言之，将上下文对象的所有内容都限定在它自己的组件中，在它自己的文件中，将其导出并将所有子组件包装在根组件中（或包装根组件本身），然后调用 useContext() 在需要上下文值的组件中的提供者对象上。