React Bootstrap 的 ReactJS 自动完成功能不起作用

Question

我正在尝试使用 React Bootstrap 中的表单组件构建一个自动完成搜索字段，该组件由浏览器呈现为输入。

这是我在 React 组件中所做的事情：

<FormControl
 id="frenchToEnglishInput"
 placeholder="type a word..."
 aria-label="Recipient's username"
 autocomplete="on"
 data={frenchToEnglishWords}
 onChange={this.fetchFrenchToEnglish}
 renderItem = {item => {
   return (
     <div>
       {item}
     </div>
   );
 }}
/>

该frenchToEnglishWords数组在组件外部声明为 a var，因为我打算在输入字段中键入一些值时更新它。

现在这是触发事件的函数onChange：

fetchFrenchToEnglish = async () => {
    if(document.getElementById("frenchToEnglishInput").value!==''){

      axios.get(dictionaryURIs.english.French_English+""+document.getElementById("frenchToEnglishInput").value)
      .then(response => {
          frenchToEnglishWords = response.data
      })

    }
  }

在集合上设置自动完成索引后，该请求是从 MongoDb 发出的，但这部分工作正常。

我的问题是，为什么我得到的唯一“自动完成”是由我之前输入的单词组成的？

或者也许我用作输入数据的数组必须是 a const（正如我在许多示例中看​​到的那样）而不是var？当我输入某个单词时，我没有从frenchToEnglishWords正在从数据库更新的 中得到任何自动建议。

Answer 1

你需要使用状态！

这是行不通的，因为数据字段不是状态，您需要将函数绑定fetchFrenchToEnglish到数据状态。

但首先，没有理由使用var，因为它们之间最大的区别只是作用域和不变性，这里有更多相关内容。

另外，您可以使用像useState和这样的钩子useRef，但没有用getElementById。