到达 useRef() Current 属性 return 未识别，但在 Div 中添加子元素时使用 UseEffect 触发

Question

我不熟悉 React 和理解 React Hooks，我正在创建一个小应用程序，我在其中使用添加 Div 元素动态创建 Bar。为此，我使用 useRef() 和 UseEffect() 在 div 元素的每次更改后进行渲染，尽管我知道初始值设置为 null 这就是它返回未识别值的原因，但我真的很想了解我如何初始化或任何解决方法。下面是我的代码

import React from "react";
import { useRef, useEffect, useState } from "react";
import "./ExpenseFilter.css";

const ExpenseFilter = (props) => {
  const values = [100, 100, 340, 320, 500, 50, 45, 385, 95, 120, 90, 20];
  const [refState, setrefState] = useState();
  const ref = useRef();

  useEffect(() => {
    console.log(ref.current);
  }, [refState]);

  const drawChart = (data, padding) => {
    const max = Math.max.apply(Math, data);
    const chart = ref.current;
    console.log(chart);
    const barwidth =
      (chart.offsetWidth - (values.length - 1) * padding - data.length * 10) /
      data.length;
    console.log(barwidth);
    let left = 0;
    for (let i in data) {
      let newbar = document.createElement("div");
      newbar.setAttribute("class", "bar");
      newbar.style.width = barwidth + "px";
      newbar.style.height = (data[i] / max) * 100 + "%";
      newbar.style.left = left + "px";
      chart.appendChild(newbar);
      left += barwidth + padding + 10;
      props.OnChangeDiv(newbar);
    }
  };
  drawChart(values, 15);

  return (
    <div className="wrapper1">
      <div className="select" tabIndex="1">
        <input
          className="selectopt"
          name="test"
          type="radio"
          id="opt1"
          checked
        />
        <label for="opt1" class="option">
          2019
        </label>
        <input className="selectopt" name="test" type="radio" id="opt2" />
        <label for="opt2" class="option">
          2020
        </label>
        <input className="selectopt" name="test" type="radio" id="opt3" />
        <label for="opt3" class="option">
          2021
        </label>
        <input className="selectopt" name="test" type="radio" id="opt4" />
        <label for="opt4" class="option">
          2022
        </label>
        <input className="selectopt" name="test" type="radio" id="opt5" />
        <label for="opt5" class="option">
          2023
        </label>
      </div>
      <div
        id="chart"
        ref={(el) => {
          setrefState(el);
        }}
      ></div>
    </div>
  );
};

export default ExpenseFilter;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您使用引用的方式有问题。

const ref = useRef()

...

<div ref={ref}>Example</div>

// ref.current is now <div>Example</div>

Answer 2

感谢您对此进行调查，我自己解决了这个问题。因此，正如我之前所说，分配给 useRef() 的初始值是空的，我们都知道这就是当前属性被设置为未识别的原因。我所做的是我在 ref 上设置了一个条件，如果它是未识别的，那么它应该 return 并使用 useState 钩子来触发捕获状态，一旦状态发生变化，它就会触发 useEffect() 重新 -呈现当前状态。

useEffect(() => {
    if (!ref.current) {
      return;
    }
    ref.current = refState;
    console.log(ref.current);
  }, [refState]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div
        id="chart"
        ref={(el) => {
          ref.current = el;
          setrefState(el);
        }}
      ></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果裁判使用下一个州

到达 useRef() Current 属性 return 未识别，但在 Div 中添加子元素时使用 UseEffect 触发

Reach useRef() Current property return unidentified though using UseEffect to fire when adding a child element inside a Div

reactjs

use-effect

use-ref