Question

我的查询字符串已正确生成，但除非两次单击搜索按钮，否则不会添加到api中。首次单击后，每次搜索都可以正常进行。除非我重新加载页面。如果使用其他输入进行搜索，则同样如此。

您将在控制台中看到。输入数据在搜索表单中定义。

第一次点击。

SearchForm.js:26 IDXT001 2222
API.js:8 The query string is undefined

第二次点击。

API.js:8 The query string is filter=IDXT001|2222

这是时间问题吗？似乎证明每次后续点击后都能正常工作。

Api ..

search: function(query) {
console.log("The query string is " + query)
return axios.get("http://api/document?" + query );
},

方法..

 loadContracts = (query) => {
  API.search(query)
  .then(res => {
    const contracts = res.data;
    this.setState({ contracts })
  })
  .catch(err => console.log(err));
};

提交按钮。

 handleFormSubmit = event => {
event.preventDefault();

const formData = this.state.formValues
let keys = Object.keys(formData);

keys.map(k => {
  let query = '';
  if (query !== "")
  query += `&`;
  query += `filter=`
  query += `${k}|${formData[k]}`

  this.setState({query}) ; 
  return this.loadContracts(this.state.query);
})
};

编辑第一次单击后，每次都无法正常工作。如果我在第一次单击后更改数据值，则先前的值将添加到api。因此，这绝对是时间问题。我的猜测是查询字符串在第一次单击后被添加到状态，然后在下次单击时发送到api。因此，我需要更改代码以将查询字符串直接添加到loadcontracts函数中，或者在发送到state之后再返回loadContracts（）之前添加.then？

Answer 1

问题是我在handleFormSubmit上方有loadContracts =（query）方法。因此，由于react是自上而下的，因此查询字符串在第一次单击时就停留在状态，直到第二次单击才被添加到loadContracts =（query）中。反正我就是这样看的。如果我错了纠正我。

除非在React中单击两次搜索，否则查询字符串不会添加到api

1 个答案: