TS2531 с использованием Ref - PullRequest
Новая
       10

TS2531 с использованием Ref

0 голосов
/ 08 ноября 2019

Я получаю проблему TSLink выбрасывает TS2531 (объект, возможно, 'null'.) В коде моего проекта, так что я делаю самый простой тест, чтобы изолировать проблему.

Дело в том, что я тестирую точно такой же код в песочнице React + TS на codesandbox, и он работает нормально. Вот код: 

import React from "react";

export const SimpleComp = () => {
    const refName = React.useRef(null);

    const getValue = (): void => {
        if (refName.current !== null) {
            console.log(refName.current.value);
        }
    };

    return (
        <>
            <input type="text" ref={refName} />
            <button onClick={() => getValue()}>Get Value</button>
        </>
    );
};

Я предполагаю, что я могу исправить это на tsconfig.json, но я не уверен, как, так как я скопировал тот же tsconfig.json из кодов andbox и я 'Я все еще имею ту же проблему. Кстати, я использую веб-шторм.

Есть идеи, как это исправить?

PS: вот ссылка для моих кодов andbox: https://codesandbox.io/s/competent-franklin-ww4xk

1 Ответ

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

TypeScript не может сделать вывод, для чего будет использоваться ссылка. Вы можете передать HTMLInputElement для общей функции useRef<T>.

Изменить: 

const refName = React.useRef(null);

На: 

const refName = React.useRef<HTMLInputElement>(null);
...