如何实现点击Submit按钮后才用React DataTable展示数据？

要实现点击Submit按钮后才加载数据，需要做以下修改：

• 移除组件挂载时自动调用数据获取的useEffect
• 给表单添加提交事件处理函数，阻止默认表单提交行为（避免页面刷新），并在事件中触发数据获取

修改后的完整代码：

import DataTable from "react-data-table-component"
import { useState } from "react"

function App() {
    const [data, setData] = useState([])
    const [loading, setLoading] = useState(false)
    const [perPage, setPerPage] = useState(10)

    const columns = [
        {
            name: "In Market Date",
            selector: (row) => row.userId,
            width: "120px",
            wrap: true
        },
        {
            name: "Topic/Title",
            selector: (row) => row.title,
            wrap: true
        },
        {
            name: "Sl Number",
            selector: (row) => row.title,
            wrap: true
        },
        {
            name: "Document ID",
            selector: (row) => row.title,
            wrap: true
        },
        {
            name: "Meeting Contact",
            selector: (row) => row.title,
            wrap: true
        },
        {
            name: "Reference",
            selector: (row) => (row.completed ? "Yes" : "No"),
            wrap: true
        },
    ]

    async function fetchTableData() {
        setLoading(true)
        
        const response = await fetch('https://jsonplaceholder.typicode.com/todos')
        const users = await response.json()
        setData(users)
        setLoading(false)
    }

    // 表单提交处理函数
    const handleSubmit = (e) => {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault()
        // 调用数据获取函数
        fetchTableData()
    }

  return (
      <div className="wrapper">
        <h1> User info </h1>
        {/* 给表单添加onSubmit事件 */}
        <form onSubmit={handleSubmit}>
          <fieldset>
            <label>
              <p>User Name:</p>
              <input name="name" />
            </label>
              <label>
                  <p>DM Number:</p>
                  <input name="number" />
              </label>
              <label>
                  <p>Document ID:</p>
                  <input name="docnumber" />
              </label>
          </fieldset>
          <button type="submit">Submit</button>
        </form>

          <DataTable
              columns={columns}
              data={data}
              progressPending={loading}
              pagination
          />
      </div>
  )
}

export default App;

关键修改说明： #

1. 移除自动加载的useEffect：原来的useEffect(() => { fetchTableData() }, [])会在组件挂载时立即调用数据获取，现在直接删除这段代码，取消自动加载。
2. 添加表单提交事件：给<form>标签添加onSubmit={handleSubmit}，通过表单的提交事件触发数据获取，这比直接给按钮加onClick更符合表单交互逻辑（同时支持回车提交）。
3. 阻止默认提交行为：在handleSubmit中调用e.preventDefault()，避免表单提交导致页面刷新，保证React应用的状态不丢失。

内容的提问来源于stack exchange，提问作者Stella