React Hooks на верхнем уровне многостраничной формы, созданной с помощью response-hook-form - PullRequest
Новая
       20

React Hooks на верхнем уровне многостраничной формы, созданной с помощью response-hook-form

1 голос
/ 07 ноября 2019

Я пытаюсь использовать форму реагирующего крючка, которая является многошаговой формой и где один из шагов имеет поле условной формы.

Условие в поле состоит в том, что логический атрибут имеет видправда. Если это правда, я хочу отобразить ряд вопросов, касающихся этого атрибута.

Я нашел этот пример , и я попытался следовать логике этого в своей попытке,что указано ниже: 

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

import useForm from "react-hook-form";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import updateAction from "./updateAction";




const Techniques = props => {
  const { register, unregister, handleSubmit, setValue, watch, errors } = useForm();
  const { action } = useStateMachine(updateAction);
  const onSubit = data => {
    action(data);
    props.history.push("./ProposalInnovation");
  };

const fundingOffer = watch("fundingOffer");

const CustomInput = React.memo(({ register, unregister, setValue, fundingOffer }) => {
  useEffect(() => {
    register({ fundingOffer });

    return () => unregister(fundingOffer);
  }, [fundingOffer, register, unregister]);
  return <input onChange={e => setValue(fundingOffer, e.target.value)} />;
});

function App() {
  const { register, unregister, handleSubmit, setValue, watch } = useForm();
  const fundingOffer = watch("fundingOffer");


  return (

    <div>
      <form onSubmit={handleSubmit(onSubit)}>

        <label>Test for condition:</label>
        <radio 
          ref={register} 
          name="fundingOffer"

        />

        <label>Conditional Field:</label>
        {fundingOffer == true && (
          <CustomInput {...{ register, unregister, setValue, fundingOffer: false }} />
        )}



        <input type="submit" value="next" />    




      </form>

    </div>  
  );
};
};

export default withRouter(Techniques);

Когда я пытаюсь это сделать в своем коде, я получаю сообщение об ошибке:

React Hook "useEffect" не может быть вызвано внутри обратного вызова. React Hooks должны вызываться в компоненте функции React или в пользовательской функции React Hook

Я думаю, проблема в том, что я использовал ловушку внутри многошаговой формы - так что, возможно, это считается отсутствующим на верхнем уровне(когда я делаю несколько шагов в своей многошаговой форме).

Кто-нибудь знает, как использовать условную логику в хуках в этой конструкции формы?

...