小编Top*_*psy的帖子

我制作了一个组件,在我的React应用程序中嵌入了一个YouTube视频,效果很好.

要做到这一点,我正在使用iframe.

 <div className="embed-responsive embed-responsive-16by9">
            <iframe className="embed-responsive-item" src={`${BASE_URL}${videoId}`}/>
 </div>

但即使它有效,我也不知道为什么,但我得到了这个错误.

sw.js:5 Uncaught TypeError:在非对象上调用Object.defineProperty

这似乎是一个YouTube问题,因为如果我在iframe中使用其他网址而不是:https://www.youtube.com/embed/ZJD1zoAaCmo ,例如:https: //www.dailymotion.com/embed/video/xwr14q

我不会再有错误了

如果您有任何想法,那将非常感激

谢谢提前!

这就是我想要实现的目标。

我想制作一个包，用于共享打字稿接口，或在我的前端（react）和后端（nestjs）之间共享的通用配置

我创建了名为“shared”的项目，并在我的 package.json 中创建了一个链接。

就像这样："shared": "file:../shared",

我的 React 效果很好，可以使用我的界面或“共享”中的任何内容，没有任何错误！

我在nestjs项目中做了同样的事情，编辑器中没有错误，我可以在node_modules中看到共享包。但是当我编译该项目时，它失败了：

错误：找不到模块“共享/接口/用户”

所以我猜问题出在我的nestjsconf或webpack中的某些东西......但我不知道是什么。

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "moduleResolution": "node",
  },
}

webpack-hmr.config.js

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options) {

    return {
        ...options,
        entry: ['webpack/hot/poll?500', options.entry],
        watch: true,
        externals: [
            nodeExternals({
                allowlist: ['webpack/hot/poll?500'],
            }),
        ],
        plugins: …

我是Redux的新手，还是Redux devtool的新手。

我制作了一个简单的应用程序，您可以在其中单击用户，并显示有关该用户的一些数据。

所以基本上在状态下，我有当前选择的用户。

但是我不知道为什么在redux devtool中状态总是空虚。（不在应用程序中）

这是我创建商店的地方：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

这是动作：

export const USER_SELECTED = 'USER_SELECTED'
export function selectUser(user){
    return {
        type : USER_SELECTED,
        payload : user
    }

}

这是一个减速器：

import {USER_SELECTED} from '../actions/index'
export default function (state = null,action){
    switch(action.type){ …

我正在 React TypeScript 项目中设置 eslint，除了一件事之外，一切正常。

我已经以这样的方式配置了项目，当我保存文件时，eslint 运行并根据我设置的规则修复所有可修复的问题。有用。

Eslint 将缺少尾随逗号视为错误，这对我来说很好。

但是，当我保存项目时，我可以看到添加了尾随逗号，然后几乎立即将其删除。结果我无法修复我的 eslint 错误。

所以我认为这会是 vscode 设置冲突，所以我从用户设置中删除了所有内容。它不起作用。

我最终删除了所有插件，卸载了 vscode，删除了 mac 中的 .vscode，然后重新安装。我什至从我的项目中删除了所有更漂亮的 eslintrc 文件

但即使在一个全新的项目中，当我保存时，vscode 也会删除尾随的逗号...

如果您知道如何改变这种行为，我会很高兴听到它:)提前谢谢您。

大家好，我正在寻找一种从联合打字稿类型获取数组的方法

这是一个现有的类型：

 export type GridClassKey =
  | 'root'
  | 'container'
  | 'item'
  | 'zeroMinWidth'
  | 'direction-xs-column'
  | 'direction-xs-column-reverse'
  | 'direction-xs-row-reverse'
  | 'wrap-xs-nowrap'
  | 'wrap-xs-wrap-reverse'
  | 'align-items-xs-center'
  | 'align-items-xs-flex-start'
  | 'align-items-xs-flex-end'
  | 'align-items-xs-baseline'
  | 'align-content-xs-center'
  | 'align-content-xs-flex-start'
  | 'align-content-xs-flex-end'
  | 'align-content-xs-space-between'
  | 'align-content-xs-space-around'
  | 'justify-xs-center'
  | 'justify-xs-flex-end'
  | 'justify-xs-space-between'
  | 'justify-xs-space-around'
  | 'justify-xs-space-evenly'
  | 'spacing-xs-1'
  | 'spacing-xs-2'
  | 'spacing-xs-3'
  | 'spacing-xs-4'
  | 'spacing-xs-5'
  | 'spacing-xs-6'
  | 'spacing-xs-7'
  | 'spacing-xs-8'
  | 'spacing-xs-9'
  | 'spacing-xs-10'
  | 'grid-xs-auto'
  | 'grid-xs-true'
  | 'grid-xs-1'
  | 'grid-xs-2' …

我无法输入mapStateToProps的“状态”参数

如果我只是改变state : any而不是state: AppState它的作品，没有错误。但是我想为我的state参数输入正确的类型。

现在，我在connect（）的mapStateToProps参数上遇到此错误

没有重载匹配此调用。最后一次重载给出了以下错误。类型'（state：{测验：IQuizInitialState;}）=> StateProps'的参数不可分配给'MapStateToPropsParam'类型的参数。无法将类型'（state：{测验：IQuizInitialState;}）=> StateProps'分配为'MapStateToPropsFactory'。参数“状态”和“初始状态”不兼容。类型“ {}”中缺少属性“测验”，但类型“ {{测验：IQuizInitialState; }'。ts（2769）

interface OwnProps {

}
interface StateProps {

}
interface DispatchProps {

}

type Props = OwnProps & StateProps & DispatchProps;


export class App extends Component<Props> {

  render() {
    return (
     <div>Hey</div>
    );
  }
}

const mapStateToProps = (state: AppState): StateProps => ({ 
})

const mapDispatchToProps = (dispatch: ThunkDispatch<{}, {}, AnyAction>): DispatchProps => {
    return {
    }
}


// The args 'mapStateToProps' generate the error …

我正在尝试将我的 nestjs 项目部署到 heroku。但是我在连接到 mongoDB 时一直有超时错误

2020-03-08T21:53:43.192716+00:00 app[web.1]: [31m[Nest] 54   - 
[39m03/08/2020, 9:53:43 PM   [38;5;3m[MongooseModule] [39m[31mUnable to connect to the database. 
Retrying (1)...[39m[38;5;3m +30084ms[39m
2020-03-08T21:53:53.398546+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-08T21:53:53.308228+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

奇怪的是它是 mongodb atlas 集群（在云上），当我尝试从我的机​​器上访问它时，一切都很好......

这是一个看起来像这样的网址： mongodb+srv://myDbUserName:myPassword@cluster0-opbo3.gcp.mongodb.net/test?retryWrites=true&w=majority

我试图MongooseModule 像这样直接传递uri， 这MongooseModule.forRoot(CONFIG.MONGODB_URI)在我的机器上再次起作用......但不是heroku......

我还尝试在 heroku 中添加 MONGODB_URI 作为 env 变量并使用它：process.env.MONGODB_URI但没有运气。

我错过了什么？

如果您有任何想法！谢谢你们 ！