React中获取输入值并动态调用不同fetch URL的实现方法

核心思路 #

通过受控组件管理输入框状态，在提交时将输入值传入数据获取函数，根据输入内容动态拼接请求URL。

具体实现步骤 #

1. 添加输入状态管理
   在组件内新增三个useState变量，分别对应三个输入框的值，用于实时同步用户输入：

const [userNo, setUserNo] = useState('');
const [idNumber, setIdNumber] = useState('');
const [licNumber, setLicNumber] = useState('');

2. 将输入框改为受控组件
   给每个输入框绑定value和onChange属性，确保输入值与状态同步：

<input 
  name="userno" 
  value={userNo} 
  onChange={(e) => setUserNo(e.target.value)} 
/>
<input 
  name="idnumber" 
  value={idNumber} 
  onChange={(e) => setIdNumber(e.target.value)} 
/>
<input 
  name="licnumber" 
  value={licNumber} 
  onChange={(e) => setLicNumber(e.target.value)} 
/>

3. 修改提交逻辑与数据获取函数

• 在handleSubmit中调用fetchTableData并传入三个输入值；
• 在fetchTableData中根据输入值判断要使用的请求URL，优先匹配非空的输入字段（可根据业务调整优先级）：

const handleSubmit = (e) => {
  e.preventDefault();
  setShow(true);
  // 传入输入值到数据获取函数
  fetchTableData(userNo, idNumber, licNumber);
};

async function fetchTableData(userNo, idNumber, licNumber) {
  setLoading(true);
  const baseUrl = 'http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080';
  let fetchUrl = `${baseUrl}/searchAll`;

  // 根据输入值动态切换URL
  if (userNo.trim()) {
    fetchUrl = `${baseUrl}/searchByUserNo?userno=${encodeURIComponent(userNo)}`;
  } else if (idNumber.trim()) {
    fetchUrl = `${baseUrl}/searchByIdNumber?idnumber=${encodeURIComponent(idNumber)}`;
  } else if (licNumber.trim()) {
    fetchUrl = `${baseUrl}/searchByLicNo?licno=${encodeURIComponent(licNumber)}`;
  }

  try {
    const response = await fetch(fetchUrl, {
      headers: { "Access-Control-Allow-Origin": "*" } // 修正参数名：header → headers
    });
    const users = await response.json();
    setData(users);
  } catch (error) {
    console.error('数据请求失败:', error);
    // 可添加错误提示逻辑
  } finally {
    setLoading(false);
  }
}

完整修改后的代码 #

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

function App() {
    const [data, setData] = useState([])
    const [loading, setLoading] = useState(false)
    const [perPage, setPerPage] = useState(10)
    const [show, setShow] = useState(false);
    // 新增输入状态管理
    const [userNo, setUserNo] = useState('');
    const [idNumber, setIdNumber] = useState('');
    const [licNumber, setLicNumber] = useState('');

    const columns = [
        {
            name: "Date",
            selector: (row) => row.memberno,
            width: "120px",
            wrap: true
        },
        {
            name: "Title",
            selector: (row) => row.title,
            wrap: true
        },
        {
            name: "ID Number",
            selector: (row) => row.dmnumber,
            wrap: true
        },
        {
            name: "License no",
            selector: (row) => row.documentid,
            wrap: true
        },
        {
            name: "Contact",
            selector: (row) => row.marketingcontact,
            wrap: true
        }
    ]

    useEffect(() => {
        fetchTableData()
    }, [])
    
    const handleSubmit = (e) => {
        e.preventDefault();
        setShow(true);
        // 传入输入值
        fetchTableData(userNo, idNumber, licNumber);
    };

    async function fetchTableData(userNo = '', idNumber = '', licNumber = '') {
        setLoading(true);
        const baseUrl = 'http://ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080';
        let fetchUrl = `${baseUrl}/searchAll`;

        // 动态判断请求URL
        if (userNo.trim()) {
            fetchUrl = `${baseUrl}/searchByUserNo?userno=${encodeURIComponent(userNo)}`;
        } else if (idNumber.trim()) {
            fetchUrl = `${baseUrl}/searchByIdNumber?idnumber=${encodeURIComponent(idNumber)}`;
        } else if (licNumber.trim()) {
            fetchUrl = `${baseUrl}/searchByLicNo?licno=${encodeURIComponent(licNumber)}`;
        }

        try {
            // 修正headers参数名（原代码写的是header，应为headers）
            const response = await fetch(fetchUrl, { headers: { "Access-Control-Allow-Origin": "*" } });
            const users = await response.json();
            setData(users);
        } catch (err) {
            console.error('请求出错:', err);
        } finally {
            setLoading(false);
        }
    }

  return (
      <div className="wrapper">
        <h1> User Data Repo </h1>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <label>
              <p>User Number:</p>
              {/* 改为受控组件 */}
              <input 
                name="userno" 
                value={userNo} 
                onChange={(e) => setUserNo(e.target.value)} 
              />
            </label>
              <label>
                  <p>ID Number:</p>
                  <input 
                    name="idnumber" 
                    value={idNumber} 
                    onChange={(e) => setIdNumber(e.target.value)} 
                  />
              </label>
              <label>
                  <p>Lic Number:</p>
                  <input 
                    name="licnumber" 
                    value={licNumber} 
                    onChange={(e) => setLicNumber(e.target.value)} 
                  />
              </label>
          </fieldset>

            <button type="submit">
                Submit
            </button>
        </form>

          <DataTable
              columns={columns}
              data={show ? data : []}
              progressPending={loading}
              pagination
          />
      </div>
  )
}

export default App;

注意事项 #

• 使用encodeURIComponent()对输入值进行编码，避免URL参数中出现特殊字符导致请求错误；
• 原代码中fetch的参数写错了，是headers而非header，已修正；
• 可根据业务需求调整输入字段的匹配优先级（比如允许多个字段同时筛选，此时需要修改URL拼接逻辑为多参数形式）；
• 添加了try/catch捕获请求异常，避免组件崩溃。

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