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是如何构建的。它可能需要一个类组件才能工作。

Working example on CodeSandbox

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

articles与某事有关。如果mui-table被更改，它似乎无法处理。我将断点放入options.rowClick中，它只被调用了一次。提供不同的MUIDataTable.render()不会重新呈现。

所以，如果我像这样添加options

key

强制重新创建而不是更新它-它起作用并且<MUIDataTable key={myState} ...显示在控制台中。

但是也许最好在他们的github中归档问题。或尝试使用最新版本。

为什么在Callback内部调用时我的状态始终是默认值？

2 个答案: