如何在React中根据搜索条件查询数据库数据并通过table表格展示

核心实现逻辑是借助React的状态管理能力，把接口返回的查询结果存在状态变量中，表格组件直接绑定该状态实现自动渲染。

具体实现步骤 #

• 定义三个核心状态：表单输入值状态、表格数据状态、加载状态（可选，用于优化体验）
• 给表单绑定onSubmit事件，触发时阻止默认跳转行为，收集表单参数调用后端查询接口
• 接口返回数据后更新表格数据的状态变量，React会自动触发表格重新渲染

完整代码示例 #

import { useState } from 'react'
import axios from 'axios' // 也可以替换为你自己封装的请求工具

const SearchTable = () => {
  // 1. 定义表单输入状态，可根据你实际的表单字段扩展
  const [formData, setFormData] = useState({
    keyword: '',
    category: '',
    startTime: '',
    endTime: ''
  })
  // 2. 定义表格数据状态，初始为空数组
  const [tableData, setTableData] = useState([])
  // 3. 加载状态
  const [loading, setLoading] = useState(false)

  // 表单输入变化时更新状态
  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  // 表单提交处理函数
  const handleSearch = async (e) => {
    e.preventDefault() // 阻止表单默认提交刷新页面的行为
    setLoading(true)
    try {
      // 调用你的后端查询API，formData就是提交的查询参数
      const res = await axios.post('/你的查询接口地址', formData)
      // 把接口返回的列表数据更新到tableData状态
      setTableData(res.data.list || [])
    } catch (err) {
      console.error('查询失败:', err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      {/* 搜索表单 */}
      <form onSubmit={handleSearch}>
        <input
          name="keyword"
          value={formData.keyword}
          onChange={handleInputChange}
          placeholder="请输入关键词"
        />
        <input
          name="category"
          value={formData.category}
          onChange={handleInputChange}
          placeholder="请输入分类"
        />
        {/* 其他表单字段按同样方式添加 */}
        <button type="submit" disabled={loading}>
          {loading ? '查询中...' : '搜索'}
        </button>
      </form>

      {/* 结果表格 */}
      <table border="1" style={{width: '100%', marginTop: '20px'}}>
        <thead>
          <tr>
            <th>字段1</th>
            <th>字段2</th>
            <th>字段3</th>
            {/* 对应你的表格列名调整 */}
          </tr>
        </thead>
        <tbody>
          {tableData.length > 0 ? (
            tableData.map((item, index) => (
              <tr key={item.id || index}>
                <td>{item.field1}</td>
                <td>{item.field2}</td>
                <td>{item.field3}</td>
                {/* 对应你的实际字段渲染 */}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan="3" align="center">暂无数据</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  )
}

export default SearchTable

注意点 #

• 表格渲染map遍历的时候一定要给tr加唯一key，如果你的数据有唯一id，优先用id代替index
• 接口返回的数据结构如果和示例不一致，按你实际的结构调整取值逻辑即可
• 表单字段可以根据你的业务需求任意扩展，只需要对应在formData状态里添加对应字段即可

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