如何将变量添加到请求的 POST 正文

Question

我正在尝试在 React 和 material-ui 中进行搜索和过滤。我已经实现了客户端搜索。我现在需要做的就是在下面添加 something 以在请求正文中传递文本字符串。此文本应来自 TextField，但我不知道如何正确实现它。如果我这样做，当它改变时它最终是未定义的，因为当状态改变时我似乎无法直接添加它。即使我通过添加 const 得到结果，它通常只会在页面加载时加载，而不是在 onInput.

上加载

搜索：

const SearchBar = ({setSearchQuery}) => (
  <form>
    <TextField
      id="search-bar"
      onInput={(e) => {
        setSearchQuery(e.target.value);
      }}
      variant="outlined"
      placeholder="Search..."
      size="small"
    />
  </form>
);

导出函数：

const [tableData, setTableData] = useState([])

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

useEffect(() => {

const someVariable = "5"

const targeturl = "https://website.com/"+someVariable+"/-1";      

fetch(targeturl, {
method: 'post',
headers: { 'Content-Type': 'application/json' },
 })
.then((data) => data.json())
.then((data) => setTableData(data))

}, [])

const rows = tableData; 

...

<div className="dflex jusend">
    <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
</div>

我尝试添加一个从 TextField 获取搜索字符串的函数，但这不起作用。

fetch(targeturl, {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: getQuery(searchQuery)
 })
.then((data) => data.json())
.then((data) => setTableData(data))

}

Answer 1

您可以在 fetch 请求的正文中发送 data 并在 useEffect 中添加依赖项：

useEffect(() => {

const someVariable = "5"

const targeturl = "https://website.com/"+someVariable+"/-1";      

fetch(targeturl, {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({searchQuery})
 })
.then((data) => data.json())
.then((data) => setTableData(data))

}, [searchQuery])

如何将变量添加到请求的 POST 正文

How do I add variable to the POST body of the request

reactjs

material-ui