时间戳

首页 > 解决方案 > Recactjs 自动完成组件给出错误

javascript - Recactjs 自动完成组件给出错误

问题描述

我是 Reactjs 的新手。我正在尝试在我的应用程序以及给定的链接中重用这种准备好的自动完成选择组件，它会为输入框中未找到的任何内容提供此错误。要查看错误，只需键入 xyz 并按 enter 并在控制台中检查错误：-

警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：

搜索此错误后，我发现当任何未初始化的状态发生更改时，它都会引发此警告。但在这段代码中，我可以看到所有状态都已初始化。我不明白为什么会这样？无论如何，我是 React 的新手，所以我必须错过一些东西。请让我知道如何解决此错误。

标签： javascriptreactjs

解决方案

这是因为在onKeyDown处理程序的第一个条件中，它设置了执行状态userInput：

filteredSuggestions[activeSuggestion]

但是，如果没有建议的匹配项，则数组将为filteredSuggestions空，并且activeSuggestion将0导致.undefineduserInput

这就像在说：

const mySuggestions = [];
let choice = 0;

console.log(mySuggestions[choice]); // undefined

受控组件应该总是有一个值，undefined而不是一个值。这就是 React 抱怨的原因。

解决此问题的一种方法是对元素使用短路评估：value

<input
  type="text"
  onChange={onChange}
  onKeyDown={onKeyDown}
  value={userInput || ""}
/>

这基本上转化为：

“如果userInput是某物，则使用它具有的任何值，否则使用空字符串”。

推荐阅读