arrays - React 中的输入自动完成：如何更新 UI 中的映射数组？

Question

我正在编写一个使用 Google Places 自动完成 API 的地址自动完成字段。

我正在使用 React Query 来获取用户类型的数据，并显示<datalist>我在数组上映射并<options>在预测数组进入时输出的内部。

所有这些都有效，但包含获取的选项的下拉菜单不会显示在 UI 中，除非我点击浏览器窗口并返回地址字段。

相关代码：

const [placeData, placeIsLoading, placeIsSuccess, placeIsError, placeError] = useFetchPlacesAutocomplete(address)


const [address, setAddress] = useState()
const [addressAutocomplete, setAddressAutocomplete] = useState(false)

<FormControl id="address" position="relative">
                        <FormLabel htmlFor="address">Address</FormLabel>
                        <Input
                            w="20rem"
                            mb={8}
                            value={address}
                            variant={addressAutocomplete ? "flushed" : "outline"}
                            list="predictions"
                            onChange={e => {
                                setAddress(e.target.value)
                                handleAutocomplete(e)
                            }}
                        />
                        {addressAutocomplete && placeIsSuccess &&
                            <datalist id="predictions">
                                {placeIsSuccess &&  placeData.predictions.map(i => (
                                    <option
                                        key={i.description}
                                        onClick={() => {
                                            setAddress(i.description)
                                            setAddressAutocomplete(false)
                                        }}
                                        value={i.description}
                                    />

                                ))}

                            </datalist>
                        }


                    </FormControl>

我认为主要问题是，为什么placeData变量会随着用户输入而更新，但映射到该数组的结果却没有实时显示在 UI 中？

提前致谢！

编辑：附加信息。我相信我知道它为什么不更新 - ReactplaceData作为数组接收，但如果该数组的内容发生更改，则不会认为状态已更新，因此组件不会重新渲染。所以我认为解决方案是在输入字段更改时强制重新渲染，但我还不知道该怎么做。

标签： arraysreactjsreact-query

Answer 1

解决方案（或至少我的解决方案）是将地址状态的输入作为 queryKey 传递，以便为每个击键生成一个新查询。以前 queryKey 只是一个字符串。