反应 onKeyPress 渲染问题答案

【问题标题】：React onKeyPress Render Issue反应 onKeyPress 渲染问题
【发布时间】：2021-04-14 14:25:39
【问题描述】：

我正在尝试制作一个充当项目符号列表的组件。无序列表项中包含一个输入字段（作为第一个项目符号点，默认情况下将始终存在）。该字段有一个onKeyPress 函数，用于检查用户是否按下返回（或 Enter）键来创建新的项目符号点。发生这种情况时，该函数将另一个相同的输入字段添加到 bulletList 数组，然后使用 .map() JS 函数在页面上呈现。

我遇到的问题如下：在始终存在的默认（第一个）输入字段上，输入功能完美运行。用户可以按回车键，并在其下方创建一个新的输入字段。问题发生在这里：在第二个（新创建的）输入字段中，输入功能部分起作用。它将需要作为测试记录的内容记录到控制台（表明它正在被触发），但不会在下面呈现新的输入字段。这里可能是什么问题？谢谢！

原始输入字段：

<input onKeyPress={(e) => handleAdd(e)} autoFocus />

加法器函数：

const handleAdd = (e) => {
        if (e.key == "Enter") {
            setBulletList([...bulletList, (<input onKeyPress={(e) => handleAdd(e)} autoFocus />)]);
            console.log("Worked?");
            console.log(bulletList);
        }
        
    };

【问题讨论】：

您是否尝试将输入本身插入到状态中？ :)
@OrAssayag 我正在尝试向数组 (bulletList) 添加一个新的输入字段，该字段呈现在原始组件下方。它第一次可以在原始版本上运行，但不能在之后创建的版本上运行。
@OrAssayag 我将它添加到数组中。是状态。 :) const [bulletList, setBulletList] = useState([]);
数组是 ReactNode 类型的，它包含 JSX 元素。 const [bulletList, setBulletList] = useState<Array<React.ReactNode>>([]);。它确实有效，因为它添加了一次，但之后就不再起作用了。
正如@OrAssayag 所提到的，您最好不要将 JSX 元素存储在您的状态中。您应该看到组件的状态是什么，而不是它应该呈现什么。例如，您可以存储输入的数量，或包含其属性的对象，...。这取决于你想做什么。但是不要存储 JSX，这可能是个坏主意。

标签： javascript reactjs typescript jsx tsx

【解决方案1】：

你没有任何东西可以区分第一个和第二个，所以当有多个时 React 会感到困惑。 React 经常会警告你确保每个元素都有自己的唯一键。如果它们没有唯一的键/标识符，那么 React 将不会更新虚拟 dom。 React 使用虚拟 dom 来识别所做的更改。

给每个人一个自己的班级，这应该可以工作。

【讨论】：

你的意思是为每个类制作一个单独的 React 组件（提取它）？
我的意思是 html 类
但是是的，制作一个单独的组件会起作用，当我想做类似的事情时，我通常会这样做。老实说，它会为您省去麻烦。

【解决方案2】：

您应该添加输入值，而不是输入 HTML 标记，如下所示：

const handleAdd = (e) => {
        if (e.key == "Enter") {
            setBulletList([...bulletList, e.target.value]);
            console.log("Worked?");
            console.log(bulletList);
        }
        
    };

【讨论】：