---
title: 直接更新表格数据
order: 3
---

````jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, Message, Pagination} from '@alifd/next';
import {Field, FormButtonGroup, FormItemGrid, Reset, SchemaForm, Submit} from '@uform/next';
import UseFormTableHooks, {ISearchParams} from '@aligov/components-use-form-table-hooks';
import GovTable from '@aligov/components-gov-table';

const dataSource = {
  current: 1,
  total: 20,
  pageSize: 15,
  list: [
    {name: '张三', age: '12'},
    {name: '李四', age: '13'}
  ]
};

const getData = (params) => {
  console.log('查询参数', params);
  return new Promise((resolve, reject) => {
    resolve(dataSource);
  })
};

function App() {
  const {
    loading,
    data = {},
    formData = {},
    search,
    reload,
    changeTable,
    updateFormData,
    updateTableData,
    updateTableRow,
  } = UseFormTableHooks(getData, {
    initData: {},
  });

  const {list, total, current, pageSize} = data;

  const columns = [{
    title: '姓名',
    dataIndex: 'name'
  }, {
    title: '年龄',
    dataIndex: 'age'
  }];

  const handleUpdateTableData = () => {
    const newList = [
      {name: '刘一', age: '22'},
      {name: '陈二', age: '33'}
    ];
    updateTableData({
      ...data,
      list: newList
    });
  };

  const handleUpdateFirstRow = () => {
    const newFirstRow = {name: '黄药师', age: '40'};
    updateTableRow(0, newFirstRow);
  };

  return (
    <div>
      <SchemaForm
        labelCol={6}
        wrapperCol={18}
        value={formData}
        onChange={updateFormData}
        onSubmit={search}
      >
        <FormItemGrid cols={[8, 8, 8]}>
          <Field name="name" type="string" title="姓名"></Field>
          <Field name="age" type="string" title="年龄"/>
        </FormItemGrid>
        <FormButtonGroup>
          <Submit>查询</Submit>​<Reset>重置</Reset>​
        </FormButtonGroup>
      </SchemaForm>

      <div style={{ margin: '20px 0' }}>
        <Button onClick={handleUpdateTableData}>更新表格数据</Button>
        <Button onClick={handleUpdateFirstRow} style={{ marginLeft: 20 }}>更新第一行数据</Button>
      </div>

      <GovTable loading={loading} hasBorder={false} dataSource={list} columns={columns}/>

      <Pagination
        onChange={changeTable}
        current={current}
        total={total}
        pageSize={pageSize}
        className={'pagination'}
      />
    </div>
  );
}

ReactDOM.render((
  <App/>
), mountNode);
````