React крючок не useRef работать с ухоженными-компонентов и машинописи - PullRequest
Новая
       5

React крючок не useRef работать с ухоженными-компонентов и машинописи

2 голосов
/ 22 сентября 2019

У меня возникли проблемы с использованием хука useRef со стилизованным компонентом.

Линтер предупреждает меня, что Object is possibly 'null' внутри didMount useEffect.Есть идеи по этому поводу?

Это не дубликат по двум причинам:

  • Старый ответ относится к ref, используемому в компоненте класса, который был единственным способомиспользуйте его до перехвата React,
  • Реквизиты innerRef больше не поддерживаются в текущей версии стилевых компонентов.

Вот пример кода моего компонента: 

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus(); //Object is possibly 'null'
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

Я наконец-то нашел решение: 

const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

У меня работает: 

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}
0 голосов
/ 22 сентября 2019

Передайте ваш inputRef в аргумент массива useEffect, и давайте посмотрим, работает ли он, вам не гарантировано, что в вашей ссылке будет .current, поэтому вы должны запускать эффект каждый раз, когда inputRef изменяется

...