React - ref 的当前函数在 if 语句上失败

Question

我在使用 React createRef 时遇到了一个非常奇怪的问题

我调用了一个 ref，它只在 if/else 语句的 else 分支中起作用。

如果我去掉if语句，ref就不起作用，如果函数转到IF路径，它也不起作用。

这是一个片段。

sendFetch("/api/cases?q=" + JSON.stringify(query_payload), "", "GET").then(
  data => {
    this.fetchedData = data;
    console.log(data.count + " results found")
    //populate the table with results
    if (data.count === "0" || data.status === "failed") {
      console.log("NOT FOUND")
      this.tableRef.current.loadTablewithNewData(false)
      //NOT WORKING
    } else {
      //reload the table component with the new data
      this.tableRef.current.loadTablewithNewData(data.context)
      //WORKING
    }
  }
)

当遵循 IF 路径时，或者我一起删除 if/else 并立即调用 ref 函数时，REACT 显示此错误 × 未处理的拒绝 (TypeError)：无法读取属性 'loadTablewithNewData' of null

Answer 1

当您发出请求时，您是否检查过添加了 ref 的元素是否确实存在于 DOM 中？

Unhandled Rejection (TypeError): Cannot read property 'loadTablewithNewData' of null

仅当您尝试访问该元素时 DOM 中不存在该元素时才会出现此错误。您在此处发布的代码按预期工作。在尝试直接在 DOM

中操作元素之前，检查该元素是否存在

if(this.tableRef.current){ // It would be null if it doesn't exist
  if (data.count === "0" || data.status === "failed") {
    console.log("NOT FOUND")
    this.tableRef.current.loadTablewithNewData(false)
  } else {
    //reload the table component with the new data
    this.tableRef.current.loadTablewithNewData(data.context)
  }
} else {
  console.log('Table not present in the DOM')
}

Answer 2

找到了。

它发生的原因似乎是因为我渲染组件的方式。我有一个条件语句，它在我第一次加载页面时呈现不同的组件。 else 语句有效，因为只有在第一次未加载页面时才会遵循 else 路径。

所以发生的事情是 if 路径将尝试为尚未呈现的 DOM 调用 ref。

React - ref 的当前函数在 if 语句上失败

React - ref's current function fails on if statement

javascript

if-statement

ref

reactjs