小编srW*_*Dev的帖子

我刚开始使用“@reduxjs/toolkit”（版本“^1.5.1”）。

我正在尝试从状态数组（roundScore）中删除一个对象。使用 . 这通常是非常简单的事情filter()。由于某种原因，这不起作用，我不明白为什么。这是我的代码：

减速片：

import { createSlice } from "@reduxjs/toolkit";

export const roundScoreSlice = createSlice({
    name: "roundScore",
    initialState: {
        roundScore: [],
    },

    reducers: {
        deleteArrow: (state, action) => {
            console.log(`action.payload = ${action.payload}`); // returns correct id

            state.roundScore.filter((arrow) => arrow.id !== action.payload);
        },
    },
});

export const { deleteArrow } = roundScoreSlice.actions;

export default roundScoreSlice.reducer;

反应组件：

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import { useDispatch } from "react-redux";
import { …

下面是所有的 HTML 和 javascript 的相关部分。javascript 片段是从顶部开始的所有内容，然后我只显示了两个“keydown”事件，否则会有很多内容需要阅读。这两个事件被标记为“第 1 节”和“第 2 节”。

我有几个不同的“keydown”事件，它们添加了各种不同的 HTML 内容。这个网页几乎完全是用 javascript 设计的，只是作为一个演示。

每次用户按下相关键时，我都希望将内容添加到 HTML 文档中。目前，只需重复按同一个键，就可以无限次添加相同的内容。这不是我想要的。

如何使事件只能进行一次？

/* ////////// INTIAL TITLE ////////// */

var initialTitle = document.createElement("h1");
var intialTitleContent = document.createTextNode("Please press the \"1\" key on your keyboard.");
initialTitle.appendChild(intialTitleContent);
document.body.appendChild(initialTitle);

/* ////////// KEYPRESS FUNCTIONS ////////// */

window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
    
// SECTION 1 - Paragraph explaining what this page is about and what to do.
    if (key.keyCode == "49") // "1"
    {
        var pElement = document.createElement("p"); …

我的设置

• MacOS = Catalina 10.15.4（最新版本）
• nvm = 0.35.3（最新版本）
• node.js = 12.16.3（最新 LTS 版本）。安装在 nvm 目录内。
• npm = 6.14.4（最新版本）。安装在 nvm 目录内。

注意：. 内部没有全局安装usr/local。

我的问题

我用来npm init -y创建我的 package.json。这里没有问题。

我用npm install --save-dev @babel/core。这里没有问题。我得到的版本是 7.9.6。

然后当我使用时npm install --save-dev @babel/cli我会回来：

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. …

我正在使用“fullscreenchange”事件通过添加或删除 ID ( #showFullscreen) 来应用我想要的 css，该 ID 将主导已应用于.fullscreen.

    var fullscreen = document.getElementsByClassName("fullscreen");

    document.addEventListener("fullscreenchange", function() {
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
            fullscreen[0].setAttribute("id", "showFullscreen");
        } else if (!document.fullscreenElement || !document.webkitFullscreenElement || !document.mozFullScreenElement || !document.msFullscreenElement) {
            fullscreen[0].removeAttribute("id", "showFullscreen");
        }
     });

如何使用普通 JavaScript 使此代码在所有浏览器上工作？