为什么在回调中调用时我的状态始终是默认值

Question

我不知道我的问题到底是什么。我使用了一些库。当我使用 callback 并尝试获取 Component 的状态时，状态始终是默认值。

使用mui-datatables https://github.com/gregnb/mui-datatables 的示例

import React, { useState } from 'react'
import MUIDataTable from "mui-datatables";
const columns = [
    {
        name: "name",
        label: "Name",
    },
    {
        name: "company",
        label: "Company",
    },
    {
        name: "city",
        label: "City",
    },
    {
        name: "state",
        label: "State",
    },
];
const data = [
    { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
    { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
    { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
    { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
];

const MyComponent = () => {
    const [myState, setMyState] = useState("default value");
    const onRowClick = (rowData, rowMeta) => {
        console.log(myState) //always default value
    }
    const options = {
        onRowClick: onRowClick 
    }
    return (
        <div>
            <MUIDataTable
                title={"Employee List"}
                data={data}
                columns={columns}
                options={options}
            />
            <button onClick={ () => setMyState("State changed")}>Change state</button>
            <p>{myState}</p>
        </div>
    )
}

首先，我点击button更改MyState，p标签中的状态发生了变化。接下来，我单击任何行以console MyState 。但是，它总是default value.为什么？CodeSanBox中的代码： https://codesandbox.io/s/dreamy-germain-tuylh

Answer 1

我已经将您的组件转换为类，现在它可以按您想要的方式工作。您可以在下面看到尝试使用功能组件时发生的错误。这可能是由于mui-datatables的构建方式。它可能需要类组件才能工作。

代码沙盒上的工作示例

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
const columns = [
  {
    name: "name",
    label: "Name"
  },
  {
    name: "company",
    label: "Company"
  },
  {
    name: "city",
    label: "City"
  },
  {
    name: "state",
    label: "State"
  }
];
const data = [
  { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
  { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
  { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
  { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" }
];
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState: "default value"
    };
    this.options = { onRowClick: this.onRowClick };
    this.onRowClick = this.onRowClick.bind(this);
  }
  onRowClick(rowData, rowMeta) {
    console.log(this.state.myState); //always default value
  }
  render() {
    return (
      <div>
        <MUIDataTable
          title={"Employee List"}
          data={data}
          columns={columns}
          options={{ onRowClick: this.onRowClick }}
        />
        <button onClick={() => this.setState({ myState: "State changed" })}>
          Change state
        </button>
        <p>{this.state.myState}</p>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);

使用您的代码，我收到以下错误：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `WithStyles(Tooltip)`.
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by t)
    in t (created by l)
    in span (created by l)
    in div (created by l)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by l)
    in l (created by t)
    in t (created by WithStyles(t))
    in WithStyles(t) (created by t)
    in t (created by t)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by t)
    in t (created by WithStyles(t))
    in WithStyles(t) (created by MyComponent)
    in div (created by MyComponent)
    in MyComponent

Answer 2

这是mui-table的东西。如果更改options.rowClick，看起来它无法处理。我已经将断点放入MUIDataTable.render()，它只调用一次。提供不同的options不会重新呈现它。

所以如果我添加key喜欢

<MUIDataTable
  key={myState}
  ...

强制重新创建它而不是更新 - 它可以工作并且State changed显示在控制台中。

但也许最好在他们的 github 中提交问题。或者尝试最新版本。

Answer 3

我能够通过使用useRef钩来解决类似的问题。有关详细信息，请参阅此答案。