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

【问题标题】：Input autocomplete in React: How do you update a mapped array in the UI?React 中的输入自动完成：如何更新 UI 中的映射数组？
【发布时间】：2021-04-20 14:26:00
【问题描述】：

我正在编写一个使用 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 中？

提前致谢！

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

【问题讨论】：

如果您更新某些状态，则会发生重新渲染。因此，您可以通过更新某些状态来触发重新渲染。但我首先建议检查您的条件addressAutocomplete && placeIsSuccess 以及是否确实有效。前面的条件是否评估为true？还有placeData.predictions 是什么样子的？
在不知道 useFetchPlacesAutocomplete 做什么的情况下无法判断。是queryKey的地址部分吗？
@TkDodo 我将地址添加到 queryKey 中，它起作用了，就是这样。它以前只是一个字符串。

标签： arrays reactjs react-query

【解决方案1】：

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

【讨论】：