使用React-Query进行重复搜索行为

Question

我正在尝试使用React-Query进行以下操作：

我有一个模态对话框，其中包含一个搜索输入字段（旁边的搜索按钮）以及一堆其他表单字段。目标是使用户输入ID，然后单击搜索按钮时，请调用“搜索”端点，如果找到相应的实体，则使用此实体进行水合。

我想不出一种“自然感觉”的方式，可以用反应疑问。

我能想到的最好的内容如下：

const [searchId, setSearchId] = useState()
const getEntity = useGetEntity({ id: searchId }); // just a useQuery wrapping hook which uses enabled: !!id

useEffect(() => {
  const found = getEntity.data
  if (found) {
    form.setFieldsValue(_.pick(found, ['name', 'address', 'country'])) // hydrate the form - I'm using antd here
    setSearchId(null); 
    // otherwise the user wouldn't be able to repeat the search with the same id
  }
}, [getEntity .data])

在哪里使用：

export const useGetEntity = ({ id }) => {
  return useQuery({
    queryKey: ['searchedEntity', id],
    queryFn: () => fetchEntity(id), // axios call
    enabled: !!id
  })
}

...在哪里单击搜索按钮触发setSearchID（id） ，

但这感觉不佳。有更好的方法吗？

谢谢！

Answer 1

处理此问题的最佳方法是将搜索和表单分为两个不同的组件，并将数据作为道具传递给搜索表格，在该表单中可以将其用作本地状态的初始状态。 usegetentity挂钩看起来很完美。

const [searchId, setSearchId] = useState()
const getEntity = useGetEntity({ id: searchId });

if (getEntity.data) {
  return <MyForm initialData={getEntity.data} />
}

// loading and error handling for the query goes her

//否则用户将无法使用相同的ID

重复搜索

，最好的方法是检查searchID 的平等，然后触发<代码> refetch（）从usequery而不是设置ID，例如：

<button onClick={() => {
  (id === searchId) ? refetch() : setSearchId(id)
}}>Search</button>

Answer 2

React-Query通常用于预先http调用。您可以简单地使用Axios获取数据，然后将数据保存到您的状态，并将您的字段值引用到状态，以便任何状态变化都会导致重新渲染和补充您的表单字段。

const [formData, setFormData] = useState({
  name: null,
  address: null,
  country: null
})
//////////

//call this for search
function getApiData(){
let data = await axios.get('URL');
setFormData({
  name:data.name,
  address:data.address,
  country:data.country
  })
}

同样，在您的应用程序获取数据时，实现加载指示器也是一个很好的UX体验。