Javascript 将带有React上下文API的函数传递给树中嵌套的子组件

我第一次使用React上下文API。我有一个生成客户列表的表。最初，我将客户机存储在状态为的数组中，在同一页面中，我有一个函数根据单击对客户机进行排序

我已经将客户端移动到上下文中，而不是表所在的实际页面的状态，但现在当然我的排序函数不再工作了。我需要能够做的是使用相同的函数，而是组织处于上下文状态的数组

原始功能：

onSortClient = column => e => {
        const direction = this.state.sort.column
            ? this.state.sort.direction === "asc"
                ? "desc"
                : "asc"
            : "desc";
        const sortedData = this.state.clients.sort((a, b) => {
            if (column === "client_name") {
                const nameA = a.client_name.toUpperCase();
                const nameB = b.client_name.toUpperCase();
                if (nameA < nameB) {
                    return -1;
                }
                if (nameA > nameB) {
                    return 1;
                }

                return 0;
            }
            return 0;
        });

        if (direction === "desc") {
            sortedData.reverse();
        }

        this.setState({
            clients: sortedData,
            sort: {
                column,
                direction
            }
        });
    };

onSortClient=column=>e=>{
常量方向=this.state.sort.column
？this.state.sort.direction==“asc”
“描述”
：“asc”
：“描述”；
const sortedData=this.state.clients.sort（（a，b）=>{
如果（列==“客户名称”）{
const nameA=a.client_name.toUpperCase（）；
const nameB=b.client_name.toUpperCase（）；
if（nameA名称B）{
返回1；
}
返回0；
}
返回0；
});
如果（方向==“描述”）{
sortedData.reverse（）；
}
这是我的国家({
客户：Sortedata，
排序：{
专栏，
方向
}
});
};

我的上下文文件：

import React, { Component } from "react";
import axios from "axios";

const Context = React.createContext();

const Reducer = (state, action) => {
    switch (action.type) {
        case "DELETE_CLIENT":
            console.log(action.payload);
            return {
                ...state,
                clients: state.clients.filter(client => client.id !== action.payload)
            };
        case "ADD_CLIENT":
            return {
                ...state,
                clients: [action.payload, ...state.clients]
            };
        case "UPDATE_CLIENT":
            console.log(action.payload);
            return {
                ...state,
                clients: state.clients.map(
                    client =>
                        client.id === action.payload.id ? (client = action.payload) : client
                )
            };

        default:
            return state;
    }
};

export class Provider extends Component {
    state = {
        clients: [],
        loaded: false,
        dispatch: action => {
            this.setState(state => Reducer(state, action));
        }
    };

    async componentDidMount() {
        let localToken = localStorage.getItem("iod_tkn");

        const res = await axios({
            url: "/users/get_clients",
            method: "get",
            headers: {
                Authorization: localToken
            }
        });

        this.setState({
            clients: res.data,
            loaded: true
        });
    }


    render() {
        return (
            <Context.Provider onSortClient={this.onSortClient} value={this.state}>
                {this.props.children}
            </Context.Provider>
        );
    }
}

export const Consumer = Context.Consumer;

import React，{Component}来自“React”；
从“axios”导入axios；
const Context=React.createContext（）；
const Reducer=（状态、操作）=>{
开关（动作类型）{
案例“删除客户机”：
console.log（action.payload）；
返回{
……国家，
客户端：state.clients.filter（客户端=>client.id！==action.payload）
};
案例“添加客户端”：
返回{
……国家，
客户端：[action.payload，…state.clients]
};
案例“更新客户端”：
console.log（action.payload）；
返回{
……国家，
客户端：state.clients.map(
客户=>
client.id==action.payload.id？（client=action.payload）：客户端
)
};
违约：
返回状态；
}
};
导出类提供程序扩展组件{
状态={
客户：[]，
加载：false，
调度：操作=>{
this.setState（state=>Reducer（state，action））；
}
};
异步组件didmount（）{
让localToken=localStorage.getItem（“iod_tkn”）；
const res=等待axios({
url:“/users/get_clients”，
方法：“获取”，
标题：{
授权：localToken
}
});
这是我的国家({
客户：res.data，
加载：正确
});
}
render（）{
返回(
{this.props.children}
);
}
}
export const Consumer=Context.Consumer；

也许是这样的

<Context.Provider
    value={{
        state: this.state,
        onSortClient: this.onSortClient,
    }}
>
    {this.props.children}
</Context.Provider>

{this.props.children}

---

因此，

value.state

将是您的状态，

value.onSortClient

将是您的功能。

如果您非常擅长反应，我还有一个问题还没有人能够解决：）