Проблема с использованием Relay QueryRenderer для отображения капчи в избыточной форме - PullRequest
Новая
       21

Проблема с использованием Relay QueryRenderer для отображения капчи в избыточной форме

0 голосов
/ 05 мая 2019

Я создаю капчу для своего проекта. Я получаю изображение капчи и ключ капчи из Graphql, используя QueryRenderer. Проблема заключается в том, что я должен вызвать излишнюю форму OnChange prop внутри QueryRenderer результирующих реквизитов (что неправильно!), И я получаю эту ошибку: Невозможно обновить во время существующего перехода состояния (например, в render). Методы рендеринга должны быть чистой функцией реквизита и состояния.

Компонент формы: 

let Inquiry = (props) => {
    return (
        <>
            <form className="" onSubmit={props.handleSubmit}>
                <div className="form-group row">
                    <div className="col-md-3">
                        <Field
                            type="text"
                            name="id"
                            validate={[required, number]}
                            component={renderField}
                        />
                    </div>
                </div>
                <div className="form-group row">
                    <div className="col-md-3">
                        <Field
                            component={Captcha}
                            isSubmitting={props.submitting}
                            reloadIfSucceed={true}
                            name={"captchaKey"}
                        />
                    </div>
                </div>
                <div className="form-group row">
                    <div className="col-md-3">
                        <Field
                            type="text"
                            name="captchaValue"
                            validate={[required, number]}
                            component={renderField}
                        />
                    </div>
                </div>
                <div className="form-group row">
                    <label className="col-md-3"> </label>
                    <div className="col-md-9">
                        <button type="submit" disabled={props.submitting}>
                            Search
                        </button>
                    </div>
                </div>
            </form>
        </>
    )
}
export default reduxForm({
    form: 'InquiriesForm',
})(Inquiry);

Компонент капчи: 

const CaptchaImage = (props) => {
    props.input.onChange(props.data.captcha.generateCaptcha.captchaKey);
    useEffect(() => {
        _refetch()
    }, [props.submitting]);
    const code = props.data.captcha;
    return (
        <>
            <img src={"data:image/png;base64, " + code.generateCaptcha.captcha} className={"border"} alt="Captcha"/>
            <button className={"btn btn-link border-0"}><i onClick={_refetch} title="Refresh"
                                                           className={"fa fa-sync-alt"}> </i></button>
        </>
    );
    function _refetch() {
        props.relay.refetch(
            {},
            null,
            () => {
                console.log('Refetch done')
            },
            {force: true},
        );
    }
}


const ResetCaptcha = createRefetchContainer(
    CaptchaImage,
    graphql`
    fragment Captcha_captcha on CaptchaOutputDTOType {
      captcha
      captchaKey
    }
  `,
    graphql`
    query CaptchaQuery {
 captcha {
   generateCaptcha {
   ...Captcha_captcha
 }
}
}
);
class Captcha extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <QueryRenderer
                environment={environment}
                query={captchaReFetchQuery}
                cacheConfig={{force: true}}
                variables={{}}
                render={({props}) => {
                    if (props) {
                        return (
                            <ResetCaptcha captcha={null} data={props} {...this.props} />
                        )
                    }
                    return <div>Loading</div>;
                }}
            />
        )
    }
}
export default Captcha

Я также попытался сохранить данные в избыточном коде, а затем передать ключ капчи из хранилища в редуктор (с помощью formReducer.plugin), но ошибка осталась. Заранее спасибо.

Обновление: Я использовал fetchQuery и добавил исключение для имени запроса CaptchaQuery в настройке кеша graphql Environment.js, и теперь он работает нормально.

...