reactjs - 通过 ref 设置状态在 useEffect 中不起作用？

Question

我正在尝试filtered使用 useRef 即清除反应表组件的状态。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我想在用户更改时清除反应表的过滤器props.selectedDealer。react table 组件在组件中不可用，Customers但在层次结构中处于非常低的级别：

Customers > CustomersTable > AppTableWrapper > AppTable > ReactTable.

我正在传递customerTableRefto ReactTable。在开发工具中，我可以看到 ref 被组件选项夸大了，但customerTable.setState({ ...customerTable.state, filtered: []})没有改变ReactTable.

Answer 1

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