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

Question

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

我有一个模态对话框，其中包含一个搜索输入字段（旁边有一个搜索按钮）和一堆其他表单字段。目标是使用户能够输入一个 ID，并在单击搜索按钮时调用一个 'search' 端点，如果找到相应的实体，则使用该实体对其他表单字段进行水合。

我想不出 'natural feeling' 使用 React-Query 执行此操作的方法。

我能想到的最好的如下：

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])

其中使用GetEntity :

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

...点击搜索按钮会触发 setSearchId(id)

但这感觉有点不对劲。有没有更好的方法？

谢谢！

Answer 1

React-Query常用于提前http调用。您可以简单地使用 axios 获取数据并将数据保存到您的状态，并将您的字段值引用到您的状态，以便任何状态更改都会导致 re-rendering 并补充您的表单字段。

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
  })
}

同时实施 加载指示器 是一种很好的用户体验，同时您的应用正在获取数据。

Answer 2

解决这个问题的最佳方法是将搜索和表单拆分为两个不同的组件，并将数据作为 prop 传递给搜索表单，它可以用作本地状态的初始状态。 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

// otherwise the user wouldn't be able to repeat the search with the same id

如果这是一项要求，最好的方法是检查 searchId 是否相等，然后触发从 useQuery 返回的 refetch() 而不是设置 id ，类似：

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

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

Using React-Query for repeat search behaviour

reactjs

react-query