Question

我正在为我的项目创建验证码。我使用QueryRenderer从Graphql获取了验证码图像和验证码密钥。问题是我必须在产生的道具QueryRenderer中调用redux形式的OnChange道具（这是错误的！），并且出现此错误：在现有状态转换期间（例如在render之内，无法更新）。渲染方法应该纯粹是props和state的函数。

表单组件：

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

我还尝试将数据存储到redux中，然后将验证码密钥从存储传递到reducer（使用formReducer.plugin），但错误仍然存在。预先感谢。

更新：我使用了fetchQuery，并在graphql CaptchaQuery缓存设置中为查询名称Environment.js添加了一个例外，现在它可以正常工作。

使用中继QueryRenderer在Reduxform中显示验证码的问题

0 个答案: