Javascript 对按键渲染问题作出反应

我正试图制作一个组件，作为一种项目符号列表。在无序列表项中有一个输入字段（作为第一个项目符号，默认情况下它将始终存在）。该字段有一个

onKeyPress

功能，用于检查用户是否按回车键（或回车键）创建新的项目符号。发生这种情况时，该函数将另一个相同的输入字段添加到

bulletList

数组中，然后使用

.map（）

JS函数在页面上呈现该数组

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

原始输入字段：

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

handleAdd（e）}自动对焦/>

加法器功能：

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

const handleAdd=（e）=>{
如果（e.key==“输入”）{
setBulletList（[…bulletList，（handleAdd（e）}autoFocus/>）]；
console.log（“工作了？”）；
控制台日志（公告列表）；
}
};

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

---

给每个人一个自己的类，这应该是有效的。

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

---

给每一个都赋予它自己的类，这样应该可以工作。

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

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

---

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

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

---

是否尝试将输入本身插入状态？：）@我正在尝试向数组（bulletList）添加一个新的输入字段，该数组呈现在原始组件的下方。它第一次在原始阵列上工作，但在随后创建的阵列中不工作。@OrAssayag我正在将其添加到阵列中。是州政府。：）<代码>常量[bulletList，setBulletList]=useState（[]）数组的类型为ReactNode，它包含JSX元素<代码>常量[bulletList，setBulletList]=useState（[]）。它确实有效，因为它只添加了一次，但之后就不再有效了。正如@OrAssayag提到的，您最好不要在您的状态中存储JSX元素。您应该看到组件的状态，而不是它应该呈现什么。例如，您可以存储输入或包含其属性的对象的数量。这取决于你想做什么。但是不要存储JSX，这可能是个坏主意。您正在尝试将输入本身插入状态吗？：）@我正在尝试向数组（bulletList）添加一个新的输入字段，该数组呈现在原始组件的下方。它第一次在原始阵列上工作，但在随后创建的阵列中不工作。@OrAssayag我正在将其添加到阵列中。是州政府。：）<代码>常量[bulletList，setBulletList]=useState（[]）数组的类型为ReactNode，它包含JSX元素<代码>常量[bulletList，setBulletList]=useState（[]）。它确实有效，因为它只添加了一次，但之后就不再有效了。正如@OrAssayag提到的，您最好不要在您的状态中存储JSX元素。您应该看到组件的状态，而不是它应该呈现什么。例如，您可以存储输入或包含其属性的对象的数量。这取决于你想做什么。但不要存储JSX，这可能是个坏主意。所谓类，你的意思是为每个类创建一个单独的React组件（提取它）？我是说html类，但创建一个单独的组件是可行的，当我想做类似的事情时，这通常是我所做的。老实说，这会帮你省去很多麻烦。所谓类，你的意思是为每个类制作一个单独的React组件（提取它）？我是说html类，但是的，制作一个单独的组件会很有效，当我想做类似的事情时，这通常是我所做的。老实说，这会帮你省去以后的麻烦。