Streammer's questions

我正在使用 Docker 版本 20.10.21，构建 baeda1f。操作系统 Windows 11。决定在 Nest.js 上“dockerize”该应用程序。我通过 nest cli 创建了一个空项目并安装了 nodemon，虽然这里基本上不需要它，但没有它跟踪也可以工作。应用程序运行正常，一切正常。然后我决定创建一个 Docker 镜像和一个基于它的容器。这是我的Dockerfile

FROM node:latest

WORKDIR /app

RUN npm install -g nodemon

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3030

CMD ["npm", "run", "start:dev"]

这是我的package.json

{
  "name": "nest_docker_setup",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nodemon --config nodemon.json",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/common": "^11.0.1",
    "@nestjs/core": "^11.0.1",
    "@nestjs/platform-express": "^11.0.1",
    "reflect-metadata": "^0.2.2",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.2.0",
    "@eslint/js": "^9.18.0",
    "@nestjs/cli": "^11.0.0",
    "@nestjs/schematics": "^11.0.0",
    "@nestjs/testing": "^11.0.1",
    "@swc/cli": "^0.6.0",
    "@swc/core": "^1.10.7",
    "@types/express": "^5.0.0",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.7",
    "@types/supertest": "^6.0.2",
    "eslint": "^9.18.0",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.2",
    "globals": "^15.14.0",
    "jest": "^29.7.0",
    "nodemon": "^3.1.9",
    "prettier": "^3.4.2",
    "source-map-support": "^0.5.21",
    "supertest": "^7.0.0",
    "ts-jest": "^29.2.5",
    "ts-loader": "^9.5.2",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^5.7.3",
    "typescript-eslint": "^8.20.0"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

main.ts 如下所示

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT ?? 3030);
}
bootstrap();

这就是我的app.service.ts文件的样子

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!2';
  }
}

这就是我创建图像的方式

docker build -t server-nest:v1.0 .

这就是我创建容器的方法

docker run --name test-nest2 -p 3002:3030 --rm -v C:\Users\Dmitrij\work\nest_docker_setup:/app -v /app/node_modules server-nest:v1.0

绝对路径是正确的。这是应用程序的文件结构

究竟问题是什么？图像和容器已创建，但变更跟踪不起作用。那些。如果我更改 app.service.ts 文件中的行 return 'Hello World!2';然后通过 GET 请求 http://localhost:3002 我获得了之前的值。但即使没有 Docker，一切仍然正常。我想尝试安装 nodemon 并看看它是否可以工作，但是它没有工作。我尝试在容器运行时检查 nodemon 是否以这种方式安装。在 Docker 容器内，我运行命令来检查 nodemon 是否看到更改：

docker exec -it test-nest2 sh
nodemon --watch src --exec "nest start --watch"

我在控制台中收到了这个响应

[2:08:59 PM] Starting compilation in watch mode...

[2:09:01 PM] Found 0 errors. Watching for file changes.

[Nest] 99  - 02/23/2025, 2:09:01 PM     LOG [NestFactory] Starting Nest application...
[Nest] 99  - 02/23/2025, 2:09:01 PM     LOG [InstanceLoader] AppModule dependencies initialized +8ms
[Nest] 99  - 02/23/2025, 2:09:01 PM     LOG [RoutesResolver] AppController {/}: +3ms
[Nest] 99  - 02/23/2025, 2:09:01 PM     LOG [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 99  - 02/23/2025, 2:09:01 PM     LOG [NestApplication] Nest application successfully started +1ms
[Nest] 99  - 02/23/2025, 2:09:01 PM   ERROR [NestApplication] Error: listen EADDRINUSE: address already in use :::3030 +2ms
node:net:1937
    const ex = new UVExceptionWithHostPort(err, 'listen', address, port);
               ^

Error: listen EADDRINUSE: address already in use :::3030
    at Server.setupListenHandle [as _listen2] (node:net:1937:16)
    at listenInCluster (node:net:1994:12)
    at Server.listen (node:net:2099:7)
    at ExpressAdapter.listen (/app/node_modules/@nestjs/platform-express/adapters/express-adapter.js:109:32)
    at /app/node_modules/@nestjs/core/nest-application.js:183:30
    at new Promise (<anonymous>)
    at NestApplication.listen (/app/node_modules/@nestjs/core/nest-application.js:173:16)
    at async bootstrap (/app/src/main.ts:6:3) {
  code: 'EADDRINUSE',
  errno: -98,
  syscall: 'listen',
  address: '::',
  port: 3030
}

Node.js v23.8.0
PS C:\Users\Dmitrij\work\nest_docker_setup> 

我尝试更改端口，但没有什么帮助。我希望有人能提出一些建议。

我在 webpack 上构建支持 SCSS 的布局，必要时使用 Pug。我可以从 html 渲染图像，但是如果我尝试从 CSS 渲染到背景图像，什么也不会发生。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js',
        assetModuleFilename: path.join('img', '[name][ext]'),
        },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.svg$/,
                type: 'asset/resource',
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: path.join('fonts', '[name][ext]'),
                },
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'template.html'),
            // template: path.join(__dirname, 'src', 'template.pug'),
            filename: 'index.html',
        }),
        new FileManagerPlugin({
            events: {
                onStart: {
                    delete: ['dist'],
                },
                onEnd: {
                    copy: [
                        {
                            source: path.join('src', 'static'),
                            destination: 'dist',
                        },
                    ],
                },
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new CopyPlugin({
            patterns: [
                { 
                    from: "src/css/*.css", 
                    to: path.join(__dirname, 'dist', 'css', '[name][ext]') 
                },
                { 
                    from: "src/js",
                    to: path.join(__dirname, 'dist', 'js', '[name][ext]')
                },
                {
                    from: "src/img",
                    to:   path.join(__dirname, 'dist', 'img', '[name][ext]')
                }
            ],
        }),
    ],
    devServer: {
        watchFiles: path.join(__dirname, 'src'),
        port: 9000,
    },
    optimization: {
        minimizer: [
            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.imageminMinify,
                    options: {
                        plugins: [
                            ['gifsicle', { interlaced: true }],
                            ['jpegtran', { progressive: true }],
                            ['optipng', { optimizationLevel: 5 }],
                            ['svgo', { name: 'preset-default' }],
                        ],
                    },
                },
            }),
        ],
    },
};

出于某种原因，在我的根文件夹中，src/js/main.js 进入了 dist/img 文件夹。更准确地说，它到达了它需要在 dist / js 中的位置，但也在 dist / img 中并且位于图像中。

我有一个 dataset.json 文件和一个 index.pug 文件在文件中我有一个 -let 数据变量。如何将 dataset.json 文件中的数据获取到 index.pug 文件中的数据变量中，稍后我将在其中通过 for 循环或其他方式生成标记。将数据放入data变量中对我来说并不重要，如果有其他选项，您也可以使用它。我这样做了。创建了一个 index.js 文件，我在其中处理我的 json。

var pug = require('pug');
var fn = pug.compileFile('template.pug');
var locals = require('./dataset.json');
console.log(fn({
    name: locals
}));
console.log(locals)

我处理的 dataset.json 文件显示在控制台中。template.pug 文件如下所示

p #{name}'s Pug source code!

这里出现了问题，我怎样才能做到这一点，以便当我在控制台中使用命令调用 template.pug 文件的程序集时

pug template.pug

在此之前，我的 index.js 处理被调用，我在哪里将我的 json 分配给 name 变量？

我正处于研究后端的阶段，以 NestJS 为例。达到了使用数据库的时刻。试图安装nestjs-typegoose。我在控制台中输入 npm i nestjs-typegoose 并收到以下错误。

Could not resolve dependency:
peer @nestjs/common@"^6.10.1 || ^7.0.0" from nestjs-typegoose@7.1.38
node_modules/nestjs-typegoose
  nestjs-typegoose@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@nestjs/common",
    "version": "8.4.5",
    "whileInstalling": {
      "name": "top-api",
      "version": "0.0.1",
      "path": "/home/dzmitrylukashenka/projects/nestjs/top-api"
    },
    "location": "node_modules/@nestjs/common",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "@nestjs/common",
        "spec": "^8.4.5",
        "from": {
          "location": "/home/dzmitrylukashenka/projects/nestjs/top-api"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "@nestjs/common",
    "spec": "^8.4.5",
    "from": {
      "location": "/home/dzmitrylukashenka/projects/nestjs/top-api"
    }
  },
  "edge": {
    "type": "peer",
    "name": "@nestjs/common",
    "spec": "^6.10.1 || ^7.0.0",
    "error": "INVALID",
    "from": {
      "name": "nestjs-typegoose",
      "version": "7.1.38",
      "whileInstalling": {
        "name": "top-api",
        "version": "0.0.1",
        "path": "/home/dzmitrylukashenka/projects/nestjs/top-api"
      },
      "location": "node_modules/nestjs-typegoose",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "nestjs-typegoose",
          "spec": "*",
          "from": {
            "location": "/home/dzmitrylukashenka/projects/nestjs/top-api"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

我使用的是 nuxt:2.14.12，node.js 版本是 14，npm 是 7.7 Connected ESLint。WEBstorm 代码编辑器。这是编辑器中的 linter 设置

当我运行 linter 时，它会引发以下错误。

Initialization error (ESLint). Unexpected token { /home/user/projects/vue/monitoring-frontend/node_modules/eslint/lib/cli-engine/cli-engine.js:421 } catch {

这是我的 .eslintrc.js 的配置

这是 package.json

我有一个对象：

{
  messages: [259259, 259258],
  mood: "positive",
  heading: 2,
  tags: [1, 2],
  theme: 236
}

在向服务器发送数据之前，我需要检查对象是否包含这些字段，数据类型如示例中所示：
messages-array、
mood-string、-number
heading、
tags-array、
theme-number
，并且对象字段不为空。对空对象进行简单的验证对我来说很容易，但这是一个昏迷。

我有两个数组。['Text1', 'Text2'], [{id:1, name: "Text1"},{id:2, name:'Text2'}] 我需要创建第三个数组，以便它包含来自第二个数组的 id 键的值，对应于数组元素['Text1', 'Text2'] 。第三个数组应该是这样[1,2]如果我在第一个数组中只有一个元素，那么第三个数组应该只包含一个 ID 元素。那些。if ['Text2']，第三个数组将是[2]，如果['Text1']then [1]。

我需要找到所有标签。在 html 页面上，删除所有标签本身，并保持内容不变。据我了解，您可以找到每个标签的父标签并删除子标签。我可以获取所有 DOM 节点的数组并遍历它们，但是在这种情况下如何获取父节点？还是我爬错了草原？

大家好。情况如下。我有两个组件：标题和搜索框。搜索框是一个输入 tupe = "searchbox"，我在其中输入文本信息。Header 组件是 Searchbox 的父组件。那些。我在标题中呈现一个搜索框。我想要在 input 中输入的信息，这些信息将传递给 component 的 state。那些。如果更全局，即站点标题，它有一个输入，您可以在其中输入一些内容，并且此数据应存储在父组件的状态中。这是我的代码。搜索框组件

import React, { Component } from "react";
import "./style.scss";

class Searchbox extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "", requestResult: null };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    // this.setState({ name: "" });
    console.log(this.state.name);
  }

  render() {
    const { requestResult, name } = this.state;
    return (
      <>
        <form
          id="search_movie"
          className="search-movie"
          onSubmit={this.handleSubmit}
        >
          <input
            type="search"
            value={name}
            onChange={this.handleChange}
            requestvalue={requestResult}
          />
        </form>
        <button
          onClick={name => {
            this.props.getData(name);
          }}
        >
          OK
        </button>
      </>
    );
  }
}
export default Searchbox;

标题组件

import React, { Component } from "react";  
import Searchbox from "../Searchbox";
import User from "../User";
import "./style.scss";

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };  
  }

  getData = value => {
    this.setState({ name: value });
    console.log(this.state);
    console.log(value);
  };

  render() {
    return (
      <div className="movie-header">
        <div className="container">
          <div>Movie Catalog</div>
          <Searchbox getData={value => this.getData(value)} />
          <User />
       </div>
      </div>
    );
  }
}

export default Header;

单击“确定”按钮时，应触发 getData(value) 函数，该函数应将 value 值写入 Header 组件的状态。为什么在我的情况下不会发生这种情况？这是原始https://codesandbox.io/s/zealous-villani-u4rsm的链接

我正在尝试用纯 JS 制作一个滑块。出现以下问题。我得到一个元素列表，将其转换为数组，然后循环遍历并将 left 属性分配给每个元素。我收到错误“Uncaught TypeError: Cannot set property 'left' of undefined at positionSlides (carousel.js:21) at carousel.js:24”

这是我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <button class="btn left-btn hide">
            <img src="img/left-arrow.svg" alt="left buton">
        </button>
        <div class="carousel-container">
            <ul class="carousel" id ="carousel">
                <li class="slide active">
                    <img src="img/picture1.jpg" alt="slider image">
                </li>
                <li class="slide">
                    <img src="img/picture2.jpg" alt="slider image">
                </li>
                <li class="slide">
                    <img src="img/picture3.jpg" alt="slider image">
                </li>

            </ul>
        </div>
        <button class="btn right-btn">
            <img src="img/right-arrow.svg" alt="right button">
        </button>
        <div class="nav">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <script src="carousel.js"></script> 
</body>
</html>

这是JS

//select carousel
const carousel = document.querySelector(".carousel");
//select next button
const nextButton = document.querySelector(".right-btn");
//select left button
const previousButton = document.querySelector(".left-btn")
//select the nav
const nav = document.querySelector(".nav");
//select all the dots
const dots = [...nav.children];
//select all the slides inside the carousel
const slides = [...carousel.children];
//calculate the slides width

let slideWidth = slides[0].getBoundingClientRect().width;

//position the slides horisontaly
function positionSlides(slides){
    for(let index = 0; index < slides.length; index++){
        slides[index].slyle.left = slideWidth * index + 'px';
    }
}
positionSlides(slides);

//on right button click, we move (translateX) the carousel to the left
nextButton.addEventListener("click", function(){
    const currentSlide = carousel.querySelector(".active");
    const nextSlide = currentSlide.nextElementSibling;
    moveToSlide(carousel, currentSlide, nextSlide);
    hideButton(nextSlide, slides);
    moveToDot(nextSlide, slides, nav, dots);
});

//on left button click, we move (translateX) the carousel to the right
previousButton.addEventListener("click", function(){
    const currentSlide = carousel.querySelector(".active");
    const previousSlide = currentSlide.previousElementSibling;
    moveToSlide(carousel, currentSlide, previousSlide);
    hideButton(previousSlide, slides);
    moveToDot(previousSlide, slides, nav, dots);
});

//on dot click
nav.addEventListener("click", function(e){
    //if we didn't clcik on a dot, we exit
    if(e.target === nav) return;
    //select the clicked dot
    const targetDot = e.target;
    //select the current dot
    const currentDot = nav.querySelector(".active");
    //select the current slide
    const currentSlide = carousel.querySelector(".active");
   //find the index of the dot, so we can target the right slide
    let targetDotIndex = findIndex(targetDot, dots);
    //select the target slide
    const targetSlide = slides[targetDotIndex];
    moveToSlide(carousel, currentSlide, targetSlide);
    toggleActive(currentDot, targetDot);
    hideButton(targetSlide, slides);
})

//move to dot
function moveToDot(targetSlide, slides, nav, dots){
    let slideIndex = findIndex(targetSlide, slides);
    const currentDot = nav.querySelector(".active");
    const targetDot = dots[slideIndex];
    toggleActive(currentDot, targetDot);
}
//move to slide
function moveToSlide(carousel, currentSlide, targetSlide){
    const position = targetSlide.style.left;
    carousel.style.transform = `translateX(-${position})`;
    toggleActive(currentSlide, targetSlide);
}

//toggle active class
function toggleActive(current, target){
    current.classList.remove("active");
    target.classList.add("active");
}

//hide button
function hideButton(targetSlide, slides ){
//if the target slide is the first slide the previous button must be hidden
//and the next button must be shown
    if(targetSlide === slides[0]){
        previousButton.classList.add("hide");
        nextButton.classList.remove("hide");
    }else if(targetSlide === slides[slides.length - 1]){
        //if the target slide is the last slide the next button must hidden
        //and the previous button must be shown
        nextButton.classList.add("hide");
        previousButton.classList.remove("hide");
    }else{
//if none of the above is true, we show both the next and the previous buttons
    previousButton.classList.remove("hide");
    nextButton.classList.remove("hide");
    }
}

//find index of an item an array of items
function findIndex(item, items){
    for(let index = 0; index < items.length; index++){
        if(item === items[index]){
            return index;
        }
    }
}

我收到以下错误。

Uncaught TypeError: Cannot set property 'left' of undefined
at positionSlides (carousel.js:21)
at carousel.js:24

那些。这部分代码给出了错误

function positionSlides(slides){
    for(let index = 0; index < slides.length; index++){
        slides[index].slyle.left = slideWidth * index + 'px';
    }
  }
positionSlides(slides);

事实证明，slides 数组中的 DOM 元素没有样式属性。或者当我创建一个数组时它没有被保存。如何解决？

分支 my_first_attempt 中的完整代码https://github.com/Streammer/slider.git

我正在学习 React.js。我有一个向页面添加组件的表单。我正在验证此表格。当点击 Add 按钮时，触发 onBtnClickHandler() 函数，该函数接收来自表单输入的值并更新状态。在每一个输入中，我都有一个name属性，这个属性的值变成了一个key，输入的值变成了value，这一切都落入了新的状态。表格效果很好。接下来，使用 validate() 函数，我检查输入中是否输入了任何内容并更新状态。为此，我有一个 objectItems 对象，我在其中写入输入的状态 nameMyInputIsValid ：真或假。一切正常。我在 objectItems 中也有 formIsValid 属性，默认情况下为 false。在 validateData() 函数中，我检查了 this.state。所有 nameMyInputIsValid 的 objectItems 值为 true，并且想要更新状态覆盖 formIsValid：true。但是状态没有更新，我不明白为什么。

import React, { Component } from 'react';
import Card from './Card';
import apiCall from '../../Api/mockedApi';
import CardsGenerator from './CardsGenerator';


class CardsContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      objectItems: {
        genderIsValid: false,
        priceIsValid: false,
        titleIsValid: false,
        imageUrlIsValid: false,
        formIsValid: false,
      },

    };

    this.deleteCard = this.deleteCard.bind(this);
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onBtnClickHandler = this.onBtnClickHandler.bind(this);
    this.validate = this.validate.bind(this);
    this.validateData = this.validateData.bind(this);
  }

  componentDidMount() {
    apiCall().then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result,
        });
      },

      (error) => {
        this.setState({
          isLoaded: true,
          error,
        });
      },
    );
  }

  onChangeInput(event) {
    const { name } = event.currentTarget;
    const { value } = event.currentTarget;
    this.setState(state => ({ objectItems: { ...state.objectItems, [name]: value, [`${name}IsValid`]: this.validate(value) } }));
  }

  onBtnClickHandler(e) {
    e.preventDefault();
    this.setState(state => ({ items: [...state.items, state.objectItems] }));
    console.log(this.state.objectItems);
    this.validateData();
  }

  validate(value) {
    if (typeof value === 'string') {
      return value.length > 2;
    } if (typeof value === 'number') {
      return value >= 0;
    }
    return value;
  }

  validateData() {
    const {
      genderIsValid, priceIsValid, titleIsValid, imageUrlIsValid, formIsValid,
    } = this.state.objectItems;
    if (genderIsValid === true && priceIsValid === true && titleIsValid && imageUrlIsValid === true) {
      this.setState(() => ({ objectItems: { formIsValid: true } }));
      // this.setState({objectItems:{formIsValid:true}})
    }
    console.log(genderIsValid, priceIsValid, titleIsValid, imageUrlIsValid, formIsValid);
  }

  deleteCard(e, index) {
    e.preventDefault();
    const { items } = this.state;
    const newItems = items.filter((item, i) => i !== index);
    this.setState(() => ({
      items: newItems,
    }));
  }


  render() {
    const { error, isLoaded, items } = this.state;
    const itemColorBorder = () => this.state.objectItems.map(
      (item, index, arr) => (item === true ? 'green' : 'red'),
    );
    if (error) {
      return <div>No cards yet</div>;
    } if (!isLoaded) {
      return <div>Loading...</div>;
    }
    return (
      <React.Fragment>
        {items.map(
          (item, index) => <Card info={item} index={index} del={this.deleteCard} />,
        )}
        <CardsGenerator id="cardGenerateForm" key={9379992} add={this.onChangeInput} submit={this.onBtnClickHandler} borderColor={itemColorBorder} disabled={this.state.objectItems.formIsValid} validate={this.validate} />
      </React.Fragment>
    );
  }
}
export default CardsContainer;

我正在学习 XMLHttpRequest。写了一个 github API 请求。获得所有用户。这个想法是，我创建一个空数组，发出一个 github 请求来获取所有用户。然后我把 id 键的值压入这个空数组。我得到了一个 id 数组。然后我想获取一个 id 并通过这个 id 获取特定用户并获取特定用户的一些属性。这是我的代码。问题是我将带有我的id的数组输出到控制台，但我无法对它做任何事情并通过索引获取值，无法通过各种方法进行排序。我想获取 idArray 数组的一个单独元素，我得到 undefined，虽然我在控制台中看到了数组的值。我哪里错了？

let idArray = [];
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.github.com/users?since=0", true);
xhr.onload = function () {
    if (xhr.status != 200) {
        alert(xhr.status + ': ' + xhr.statusText);
    } else {
        //console.log(xhr.responseText);
        const newData = xhr.responseText;
        let userData  = JSON.parse(newData);
        //console.log(userData);
        userData.forEach(function(item, i, userData) {
            //console.log(item.id);
            idArray.push(item.id);
          });
    }

}
xhr.send(null);
console.log(idArray);
for(let i = 0; i <= idArray.length-1; i++){
    alert(idArray[i]);
};
Array.isArray(idArray);

有一个生成列表的代码。数据取自表格。当你点击添加按钮时，列表最后一个元素的所有数字的总和值应该出现在下面，我没有成功。尝试了不同的选项，但结果是一样的。我究竟做错了什么。

<body>
    <form>
        <input type="text" name="text1" value="Some text" class="ai" id="ai" >
        <input type="text" name="number1" value="Some numbers" class="qu" id="qu">
        <input type="text" name="number2" value="Some numbers" class="pr" id="pr">
        <input type="button" name="add" value="Add" class="add" id="add">
    </form>     
    <div id="items" class="items">
    </div>
    <div id="priceTotal">
    </div>
<script type="text/javascript">
    var a = document.getElementById('ai');
    var b = document.getElementById('qu');
    var c =document.getElementById('pr');
    var d = document.getElementById('add');
    var e = document.getElementById('items');
    var elems = document.querySelectorAll('.price');
    var price = document.getElementById('priceTotal')
    var i = 0;
         var g = function(){
            i++;
            return i; 
            }

    function f(){
        var ul = document.createElement('ul');//создаем список
        e.appendChild(ul);// вставляем в блок items
        ul.className ="item"; // добавляем класс
        var li = document.createElement('li');// создаем элемент списка
        ul.appendChild(li);
        li.innerHTML = g();
        var li2 = document.createElement('li'); //создаем второй элемент списка с чекбоксом
        ul.appendChild(li2);
        var checkbox = document.createElement('input');// вставляем чекбокс внутрь элемента списка списка
        li2.appendChild(checkbox);
        checkbox.type = "checkbox";
        var li3 = document.createElement('li');
        ul.appendChild(li3);
        li3.innerHTML = a.value; //вставляем название продукта
        var li4 = document.createElement('li');
        ul.appendChild(li4);
        li4.innerHTML = b.value;
        var li5 = document.createElement('li');
        ul.appendChild(li5);
        li5.className = "price";
        li5.innerHTML = c.value;

    }
    var elems = document.querySelectorAll('.price');
    var z= 0;
    function totalPrice(){
        for (var i = 0; i< elems.length; i++) {
            var item = elems[i];
            z+= item;
        }
        price.innerHTML =z; }
    d.addEventListener("click", f);
    d.addEventListener("click", totalPrice);

</script>

有一个带有一个按钮的简单 html 页面。每次按下它，都会生成一个带有数字的列表。第一次按应该显示第一个，第二个两个，依此类推。虽然我想确保数字显示在控制台中。我尝试将事件处理程序放在循环中。但循环的最后一个值显示在控制台中。我做错了什么？

var b = document.getElementById('button');
var c = function() {
  console.log(i);
}
for (var i = 0; i < 10; i++) {
  b.addEventListener("click", c, false);
}

<input type="button" name="Button" id="button" value="Click Me">