web-dev-qa-db-ja.com

React Context 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
            }
        });
    };

私のコンテキストファイル：

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;
javascriptreactjsreact-props
7
acd37

たぶんそのような何か？

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

だから、value.stateはあなたの状態になり、value.onSortClientはあなたの関数になります。

13
devserkan