useRef 的值在 useEffect 函数中未定义

Question

根据 useEffect 的文档，它在呈现 HTML 元素之后开始，所以为什么我在 [=11= 中将 useRef 钩子的值设为未定义] 功能。如何在此代码中使用 useEffect 设置输入字段的值。

  const territoryName = useRef();
  const [isLoading, setIsLoading] = useState(true);
  const [isDisabled, setIsDisabled] = useState(false);
  const [selectedColor, setSelectedColor] = useState("");
  const history = useHistory();
  const homepageRoute = useRouteLink("");

  const appContext = useContext(APP_CONTEXT);
  const { user, regionData, areaData, editId, displayedMap, existingPolygons } = appContext;



  useEffect(() => {
    if (!user.name || !regionData.length) {
      return history.push(homepageRoute);
    }
    else if (!areaData[editId]) {
      return errorToast("Invalid Region");
    }
    locateRegion(displayedMap, JSON.parse(areaData[editId]?.polygonVertices));
    setSelectedColor(areaData[editId]?.colorCode);
    territoryName?.current?.setValue(areaData[editId]?.mapName);
    console.log(territoryName.current) // Prints undefined
    setIsLoading(false);
  }, []);

return (
    <>
      <ToastContainer autoClose={3000} />
      <Sidebar isLoading={isLoading} isDisabled={isDisabled}>
        <SidebarHeader headerText={"Edit Territory"} showBackIcon />
        <HorizontalLine />
        <div className="modifypage-sidebar">
          <SidebarContent>
            <Input
              name="territory-name"
              ref={territoryName}
              id="territory-name"
              placeholder="Enter Territory Name"
              label="Territory Name"
            />
            <ColorPallet
              // selectedColor={selectedColor} onColorChange={onColorChange}
            />
          </SidebarContent>
          <HorizontalLine />
        </ div>

        <SidebarFooter
          text="Save"
          help="Save Changes"
          // handler={() => { updateArea(oldValues, territoryName.current.getValue(), selectedColor) }}
        />
      </Sidebar>
    </>
  )

Answer 1

当 useEffect 回调首先运行时，useRef 可能未定义，因此解决方案可能是监听 ref 的变化，检查它是否已定义，然后才继续执行该函数。

可以找到有关可能解决方案的更多信息here

useRef 的值在 useEffect 函数中未定义

Value of useRef is undefined inside the useEffect function

reactjs

react-dom

react-hooks

use-effect

use-ref