我有一個導致以下錯誤的功能組件：
null 不是一個物件（評估'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();
}
誰能解釋這種行為？
uj5u.com熱心網友回復：
使用可選鏈接到您的textInput值
像這樣 ：textInput?.current?.blur();
uj5u.com熱心網友回復：
如果您使用該屬性將 ref 設定為 DOM 節點ref，則 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被呼叫時，React 回傳一個物件，其current屬性設定為提供的初始值（"initval"在我們的例子中）。因此，第一次渲染期間的控制臺日志會列印初始值。
然后從組件回傳 JSX，組件更新 ref 并將其
current屬性設定為 DOM 節點。然后通過的回呼
useEffect運行，并且由于 ref 已經更新，它會列印 DOM 節點。然后在下一次渲染中（可以通過單擊按鈕觸發），我們再次呼叫
useRef并且 React 回傳相同的物件，因此這次渲染期間的日志會列印 DOM 節點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/463825.html
標籤：javascript 反应 反应式
上一篇：PHP發送郵件問題