Как передать дополнительный параметр в antd Поиск компонентов в функции поиска? - PullRequest
Новая
       51

Как передать дополнительный параметр в antd Поиск компонентов в функции поиска?

0 голосов
/ 28 апреля 2020

Этот код ниже всегда возвращает history is undefined, может быть, history не передан в функцию запроса должным образом?

Использование history.push в функции redux-thunk. Но каждый раз, когда он возвращает историю, undefined. 

const ForgotPass = ({ loading, history, reqReset }) => {
  console.log(history);

  const req = (history) => (value) => reqReset(value, history);

  return (
    <>
      ...
      <Row justify="center">
        <Col span={12}>
          <Search
            placeholder="enter your email"
            loading={loading}
            enterButton={<SyncOutlined />}
            onSearch={(value) => req(history)(value)}
            type="email"
          />
        </Col>
      </Row>
    </>
  );
};
const mapDispatch = (dispatch) => ({
  reqReset: (data) => dispatch(userPassResetReq(data)),
});
const mapState = () =>
  createStructuredSelector({
    loading: selectLoading,
  });
export default connect(mapState, mapDispatch)(withRouter(ForgotPass));

1 Ответ

0 голосов
/ 28 апреля 2020

Это должно работать 

import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';

const ForgotPass = ({ loading, history, reqReset }) => {
    const history = useHistory();

    const req = useCallback((value) => reqReset(value, history), [history])

    return (
        <>
            ...
    <Row justify="center">
                <Col span={12}>

                    <Search placeholder="enter your email"
                        loading={loading}
                        enterButton={<SyncOutlined />}
                        onSearch={(value) => req(history)(value)}
                        type="email"
                    />
                </Col>
            </Row>
        </>
    )
}

const mapDispatch = dispatch => ({
    reqReset: (data) => dispatch(userPassResetReq(data))
})
const mapState = () => createStructuredSelector({
    loading: selectLoading
})
export default connect(mapState, mapDispatch)(ForgotPass)

Но это ненормальный способ обработки пу sh. Это решение немного лучше: 

import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';

const ForgotPass = ({ loading, history, reqReset }) => {
    const history = useHistory();

    const req = useCallback(async (value) => {
        await reqReset(value);
        history.push('/to-some-page');
    }, [history])

    return (
        <>
            ...
    <Row justify="center">
                <Col span={12}>

                    <Search placeholder="enter your email"
                        loading={loading}
                        enterButton={<SyncOutlined />}
                        onSearch={(value) => req(history)(value)}
                        type="email"
                    />
                </Col>
            </Row>
        </>
    )
}

const mapDispatch = dispatch => ({
    reqReset: (data) => dispatch(userPassResetReq(data))
})
const mapState = () => createStructuredSelector({
    loading: selectLoading
})
export default connect(mapState, mapDispatch)(ForgotPass)
...