如何在材料表中显示来自服务器的数据？

Question

I use React js on the client side and Node js on the server side and I'm new. On the client side, I use a button and a table (I use the material-table component)

export default function UserProfile() {

  const handleClick = () => {
    return axios({
      method: "post",
      url: "/searchResult",
      data: { data }
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}> search <button/>
      <RemoteData />
    </div>
  );
}

And RemoteData...

import MaterialTable from 'material-table';

class RemoteData extends React.Component {
  render() {
    return (
      <MaterialTable
        title=""
        columns={[
          { title: 'Id', field: 'id' },
        ]}
        data={query =>
          new Promise((resolve, reject) => {
            let url = '/searchResult1'
            fetch(url)
              .then(res => res.json())
              .then(result => {
                resolve({
                  data: result.data,
                })
              })
          })
        }
      />
    )
  }
}
export default RemoteData;

Clicking the button sends the data from the client to the server and is processed.(To save your time, I write part of the code).

And Server side...

method.post('/searchResult1', searchResult1);

  searchResult1: (req, res) => {
    let query = "SELECT id FROM `information` WHERE 1=1"
    db.query(query, (err, result) => {
      if (err) {
        res.redirect('/');
      }
      console.log(result)  

    })
}

Here we display the 'result' without any problems. My question is: how can I update and display the 'result' in the material-table with each click of the button?

Answer 1

In material-table documentation you have a section called Remote Data. There is an example with a Refresh button material-ui-table-remote

The code that may interest you:

class RefreshData extends React.Component {
  constructor(props) {
    super(props);

    this.tableRef = React.createRef();
  }

  render() {
    return (
      <MaterialTable        
        title="Refresh Data Preview"
        tableRef={this.tableRef}
        columns={[
          {
            title: 'Avatar',
            field: 'avatar',
            render: rowData => (
              <img
                style={{ height: 36, borderRadius: '50%' }}
                src={rowData.avatar}
              />
            ),
          },
          { title: 'Id', field: 'id' },
          { title: 'First Name', field: 'first_name' },
          { title: 'Last Name', field: 'last_name' },
        ]}
        data={query =>
          new Promise((resolve, reject) => {
            let url = 'https://reqres.in/api/users?'
            url += 'per_page=' + query.pageSize
            url += '&page=' + (query.page + 1)
            fetch(url)
              .then(response => response.json())
              .then(result => {
                resolve({
                  data: result.data,
                  page: result.page - 1,
                  totalCount: result.total,
                })
              })
          })
        }
        actions={[
          {
            icon: 'refresh',
            tooltip: 'Refresh Data',
            isFreeAction: true,
            onClick: () => this.tableRef.current && this.tableRef.current.onQueryChange(), // This line
          }
        ]}
      />
    )
  }
}