React中如何将TextField输入值添加到POST请求体中

你遇到的问题由两个核心错误导致：

• useEffect传入的依赖数组为空[]，该hook仅会在组件首次挂载时执行一次，后续searchQuery状态变化不会触发请求重新发送
• POST请求体未做JSON序列化处理，直接传值会导致后端无法正确解析参数，同时你没有把输入状态和请求触发逻辑做绑定

1. 基础可用版本（无防抖） #

直接修改核心业务代码的useEffect逻辑，将searchQuery加入依赖数组，同时正确序列化请求体：

const [tableData, setTableData] = useState([])
const [searchQuery, setSearchQuery] = useState("");

useEffect(() => {
  // 可选：空搜索词时不发请求，按需开启
  // if (!searchQuery.trim()) return

  const someVariable = "5"
  const targeturl = `https://website.com/${someVariable}/-1`;      

  fetch(targeturl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    // 按后端接口要求调整body内的字段名，这里用keyword举例
    body: JSON.stringify({ keyword: searchQuery })
  })
  .then((res) => res.json())
  .then((data) => setTableData(data))

// 把searchQuery加入依赖数组，状态变化时自动重新执行effect
}, [searchQuery])

const rows = tableData; 

// 页面渲染部分保持不变
<div className="dflex jusend">
    <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
</div>

SearchBar组件原有逻辑无需修改，输入时会正常更新searchQuery状态，触发useEffect重新执行发送请求。

2. 优化版本（加防抖避免频繁请求） #

上面的基础版本会在你每输入一个字符时就发一次请求，会造成不必要的接口压力，建议加300ms左右的防抖优化：

import { useState, useEffect, useCallback } from 'react';
import debounce from 'lodash/debounce'; // 若未安装lodash可自行实现防抖函数

// ... 其他逻辑保持不变

const fetchSearchResult = useCallback(
  debounce((query) => {
    const someVariable = "5"
    const targeturl = `https://website.com/${someVariable}/-1`;      
    fetch(targeturl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ keyword: query })
    })
    .then(res => res.json())
    .then(data => setTableData(data))
  }, 300),
  []
)

useEffect(() => {
  fetchSearchResult(searchQuery)
  return () => fetchSearchResult.cancel()
}, [searchQuery, fetchSearchResult])

• POST请求的body仅支持字符串、FormData等格式，直接传JS对象会导致参数异常，必须用JSON.stringify()转换为JSON字符串
• 如果接口要求Content-Type为其他格式（比如application/x-www-form-urlencoded），需要对应修改headers和body的序列化逻辑

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