Я использовал useLazyQuery в функциональном компоненте, но мне нужно использовать то же самое с компонентом класса. Как мне это сделать? - PullRequest
Новая
       9

Я использовал useLazyQuery в функциональном компоненте, но мне нужно использовать то же самое с компонентом класса. Как мне это сделать?

0 голосов
/ 31 марта 2020

У меня есть некоторый функциональный компонент '' с 3 флажками и 1 кнопкой. Я использовал hook useLazyQuery, чтобы мой запрос был отправлен после нажатия на кнопку. Я это сделал. Но мой компонент обновляется каждый раз, когда я нажимаю кнопку. Вот почему я рекомендую переделать мой функциональный компонент в компонент класса. Но я не знаю, как переписать свои функции внутри функционального компонента 

const generateQuery = (checkboxNameChecked: boolean, checkboxPatronymicChecked: boolean, checkboxSurnameChecked: boolean) => 
    `query { me { id ${checkboxNameChecked ? 'name ' : ''}` +
    `${checkboxPatronymicChecked ? 'patronymic ' : ''}` +
    `${checkboxSurnameChecked ? 'surname' : ''} }}`;

//some code

const Form: React.FC<LaunchesProps> = () => {
    const checkboxName = React.useRef<HTMLInputElement>(null);
    //the same

    const customStringQuery = generateQuery(checkboxName.current && 
        checkboxName.current.checked ? true: false,
        //the same);

    const GET_USER = gql([customStringQuery]);
    const [getUser, { data, loading, error }] = 
    useLazyQuery<UserDetailsTypes.UserDetails,UserDetailsTypes.UserDetails_user>(
        GET_USER,
        { fetchPolicy: "no-cache" }
    );
    const getData = () => {
        var res = ``;
        if(data && data.me && data.me.name){res+=`${data.me.name} `}
        //the same
        if(loading) return `loading`
        if(error) return `error`
        return res;
    };
    useEffect(() => {
        textInput.current!.value = getData();
    })
    return (
    <fieldset>
        <legend>Choose fields</legend>
            //some html
            <button onClick={()=>getUser()}>Show</button>
            <input
                type="text"
                ref={textInput}
            />
    </fieldset>
  );
}

export default Form;

1 Ответ

0 голосов
/ 31 марта 2020

Вы можете обернуть свой компонент класса функциональным компонентом, который использует ловушку, а затем передать функцию getUser в качестве опоры. 

const WrapperComponent = () => {
  const [getUser] = useLazyQuery(GET_USER)

  return <YourClassComponent getUser={getUser}/>
}

Однако вы должны иметь в виду, что преобразование вашего функционала компонент к компоненту класса не повлияет на то, сколько раз ваш компонент отображается, если вы правильно не реализуете метод shouldComponentUpdate или не используете PureComponent.

Если вы хотите оптимизировать функциональный компонент вместо использования shouldComponentUpdate, вы можете использовать React.memo для достижения аналогичного эффекта, как показано здесь, в документе . Если у вас есть дорогостоящие вычисления для каждого рендера, которого вы пытаетесь избежать, вы также можете использовать хук useMemo, чтобы запомнить их.

...