尝试在函数组件之外调用 useContext

Question

我正在尝试弄清楚如何正确使用 React Context。我对尝试从函数组件外部访问上下文的问题感到困惑。我收到错误：

第9:18行：React Hook“useContext”在函数“onDragEnd”中调用，该函数既不是React函数组件，也不是自定义React Hook函数react-hooks/rules-of-hooks

这是我的整个 Schedule js 文件：

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { DragDropContext } from 'react-beautiful-dnd';
import OrderColumn from '../ordercolumn/OrderColumn';
import { ScheduleContext } from '../../schedule-context';

const onDragEnd = (result) => {
    const { destination, source, draggableId } = result;
    const context = useContext(ScheduleContext); // <-- issue is here

    if (!destination) {
        return;
    }

    if (
        destination.droppableId === source.droppableId &&
        destination.index === source.index
    ) {
        return;
    }

    const column = context.columns[source.droppableId];
    const orderIDs = Array.from(column.orderIDs);
    orderIDs.splice(source.index, 1);
    orderIDs.splice(destination.index, 0, draggableId);

    const newColumn = {
        ...column,
        orderIDs: orderIDs
    };

    const newColumns = {
        ...context.columns,
        newColumn
    };

    context.setColumns(newColumns);
};

const Schedule = () => {
    const { orders, setOrders, columns, setColumns } = useContext(
        ScheduleContext
    );
    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <div className={'full-width'}>
                <h1 className={'text-center'}>Schedule</h1>
                <div className={'lines row no-gutters'}>
                    {columns.map(function(val, index) {
                        if (index === 0) {
                            return (
                                <OrderColumn
                                    title={val.title}
                                    columnId={index}
                                    orders={orders}
                                    setOrders={setOrders}
                                    setColumns={setColumns}
                                />
                            );
                        } else {
                            return (
                                <OrderColumn
                                    title={val.title}
                                    columnId={index}
                                    setOrders={setOrders}
                                    setColumns={setColumns}
                                />
                            );
                        }
                    })}
                </div>
            </div>
        </DragDropContext>
    );
};

Schedule.propTypes = {
    orders: PropTypes.array
};

export default Schedule;

Answer 1

听起来不是油嘴滑舌，但本质上它的意思正是它所说的。onDragEnd不是一个 React 组件，因为它不返回一个ReactElement或某种 JSX。如果您将空白 return 语句编辑为 return <div>'s（对于所有路径），它将被视为一个组件并正常工作，但截至目前它没有返回任何内容。