不能在功能组件中使用 Ref()。 null 不是对象

Question

我有一个导致以下错误的功能组件：

null is not an object (evaluating 'textInput.current.blur'

不知道为什么

import React, { useState, useRef } from "react";
import { TextInput } from "react-native";

const UselessTextInput = ({ hide }) => {
    const [text, onChangeText] = React.useState("Useless Text");
    const textInput = useRef(null);

    const _renderInput = () => {
        if (hide) textInput.current.blur();
        <TextInput
            ref={textInput}
            onFocus={() => ...}
            onChangeText={onChangeText}
            value={text} />

    ...

    return __renderInput();
}

谁能解释一下这种行为？

Answer 1

如果您使用 ref 属性将 ref 设置为 DOM 节点，则 ref 的 current 属性将仅在设置后即在 useEffect 回调或来自下一个渲染。

function Counter() {
  const [count, setCount] = React.useState(0);
  const divRef = React.useRef("initval");

  console.log("During Render", divRef.current);

  React.useEffect(() => {
    console.log("Inside useEffect CB", divRef.current); 
  }, []);

  return <button ref={divRef} onClick={() => setCount(count + 1)}>{count}</button>;
}

ReactDOM.render(<Counter />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

了解流程：

当useRef被调用时Reactreturns一个对象，其current属性设置为提供的初始值（"initval"在我们的例子中）。
因此，第一次渲染期间的控制台日志会打印初始值。
然后从组件返回 JSX，更新 ref 并将其 current 属性设置为 DOM 节点。
然后传递给 useEffect 的回调运行，由于 ref 已经更新，它打印 DOM 节点。
然后在下一次渲染中（可以通过单击按钮触发），我们再次调用 useRef 和 React returns 相同的对象，因此这次是日志在渲染期间打印 DOM 节点。

Answer 2

将 optional chaining 用于您的 textInput 值

像这样：textInput?.current?.blur();

不能在功能组件中使用 Ref()。 null 不是对象

Cannot useRef() in functional component. null is not an object

javascript

reactjs

react-native