在 React Native 功能组件中未定义 useRef.current

Question

用户单击按钮后，我正在尝试集中文本输入字段。 代码如下所示：

const refName = React.useRef();

const changeFocus = () => {
    refName.current.focus();
}

文本输入的属性ref定义为refName 。 这给了我一个错误（ undefined is not an object (evaluating 'refName.current.focus') ），当我将changeFocus function 重写为console.log(refName)这就是我得到的：

Object {
  "current": undefined,
}

我不确定我应该如何定义参考或如何解决这个问题。 谢谢

Answer 1

您在没有值的情况下初始化 ref，因此在获得附加它的组件的值之前，会有一段时间ref.current undefined 。

您需要使您的 function 调用有条件，以便仅在设置了ref.current时才会发生：

const changeFocus = () => {
    refName.current?.focus();
}

您还需要声明 ref 的预期类型，因为它不能从初始值推断出来。 类型可以是特定组件的类型，也可以是：

interface Focusable {
  focus(): void;
}

const refName = React.useRef<Focusable>();

这应该可以修复在组件上设置ref属性时遇到的错误。