React hooks: как получить доступ к функции, объявленной в другой функции - PullRequest
0 голосов
/ 25 апреля 2020

Я работаю над функциональным компонентом, у которого обратный вызов (confirm) зависит от состояния searchForm. Поскольку setSearchForm является асинхронным, я использую useRef<Function>, чтобы сохранить ссылку, и, похоже, это работает, это правильный путь? И как лучше всего с этим справиться?

function DataTable() {
    const [searchForm, setSearchForm] = useState<{ [key: string]: string }>({});
    const [dataSource, setDataSource] = useState<any>(null);
    const confirmRef = useRef<Function>();
    const columns = [{
        title: 'Name',
        dataIndex: 'name',
        handleSearch: function(selectedKeys: any[], confirm: Function) {
            setSearchForm(prev => {
                let current = Object.assign({}, prev);
                current['prop'] = val;
                return current;
            });
            // confirm will trigger onChange event
            confirmRef.current = confirm;
        }
    }];

    function fetchData() {
        axios.post(url, resp => {
            setDataSource(resp.data);
        });
    }

    useEffect(() => {
        if (confirmRef.current) {
            confirmRef.current.call(null);
        }
    }, [searchForm]);

    return <Table columns={columns} dataSource={dataSource} onChange={
        () => fetchData();
    }/>;
}

И вот еще одно решение:

function DataTable() {
    const [searchForm, setSearchForm] = useState<{ [key: string]: string }>({});
    const [dataSource, setDataSource] = useState<any>(null);
    const [confirmFunction, setConfirmFunction] = useRef<Function | null>(null);
    const columns = [{
        title: 'Name',
        dataIndex: 'name',
        handleSearch: function(selectedKeys: any[], confirm: Function) {
            setSearchForm(prev => {
                let current = Object.assign({}, prev);
                current['prop'] = val;
                return current;
            });
            setConfirmFunction(confirm);
        }
    }];

    function fetchData() {
        axios.post(url, resp => {
            setDataSource(resp.data);
        });
    }

    useEffect(() => {
        if (confirmFunction) {
            confirmFunction();
        }
    }, [confirmFunction]);

    return <Table columns={columns} dataSource={dataSource} onChange={
        () => fetchData();
    }/>;
}

Это правильно?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...