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

我正在编写一个地址自动完成字段，它使用GooglePlaces自动完成API

我使用React Query在用户键入数据时获取数据，并显示一个

，其中我映射到数组上，并在预测数组出现时输出

所有这些都可以，但是包含获取选项的下拉列表不会显示在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>

const[placeData，placeIsLoading，placeIsSuccess，placeIsError，placeError]=useFetchPlacesAutocomplete（地址）
const[address，setAddress]=useState（）
const[addressAutocomplete，setAddressAutocomplete]=useState（false）
地址
{
设置地址（如目标值）
手动自动完成（e）
}}
/>
{addressAutocomplete&&placeIsSuccess&&
{placeIsSuccess&&placeData.predictions.map（i=>(
{
设置地址（即描述）
setAddressAutocomplete（假）
}}
值={i.description}
/>
))}
}

我认为主要的问题是，为什么

placeData

变量会随着用户类型的变化而更新，但映射到该数组的结果不会实时显示在UI中

提前谢谢

编辑：

---

其他信息。我相信我知道它为什么不更新-React作为一个数组接收

placeData

，但是如果该数组的内容发生更改，则该状态不会被视为已更新，因此该组件不会重新渲染。因此，我认为解决方案是在输入字段更改时强制重新渲染，但我还不知道如何做到这一点。

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

如果更新某些状态，将发生重新渲染。因此，可以通过更新某些状态来触发重新渲染。但我首先建议检查您的条件

addressAutocomplete&&placeIsSuccess

，以及这是否有效。上一个条件的计算结果是否为

true

？还有，

placeData.predictions

是什么样子的？如果不知道

useFetchplacesautomplete

做了什么，就不可能知道。地址是queryKey的一部分吗？@TkDodo我将地址添加到queryKey中，它工作了，就是这样。它以前只是一个字符串。