setState通过ref不能在useEffect中工作吗？

Question

我正在尝试使用useRef viz清除react表组件的filtered状态。ref.current.setState({...})。这是我的组件中的一段代码：

const Customers = (props) => {
  const customerTableRef = useRef()

  useEffect(() => {
    const customerTable = customerTableRef.current
    if (customerTable) {
      customerTable.setState({ ...customerTable.state, filtered: [] })
      console.log("table effect::", customerTable.state)
    }
  }, [props.selectedDealer])

我在UI中有一个绑定到props.selectedDealer的select输入，每当用户更改props.selectedDealer时，我想清除react表的过滤器。react表组件在Customers组件中不可用，但在层次结构中处于非常低的级别：

Customers > CustomersTable > AppTableWrapper > AppTable > ReactTable。

我把customerTableRef传给ReactTable了。在开发工具中，我可以看到ref被组件选项放大了，但是customerTable.setState({ ...customerTable.state, filtered: []})并没有改变ReactTable的状态。

Answer 1

我建议将customerTable传递给redux。在我们通过redux将其传递给您的组件之后。在状态变量中: useState或useReducer。状态变量的更新将导致组件的重新呈现。在ref中:等同于类组件中的实例变量。更改.current属性不会导致重新呈现