小编ole*_*ank的帖子

是的:对象数组的深度验证

我有一个这样的数据结构:

{
  "subject": "Ah yeah",
  "description": "Jeg siger...",
  "daysOfWeek": [
    {
      "dayOfWeek": "MONDAY",
      "checked": false
    },
    {
      "dayOfWeek": "TUESDAY",
      "checked": false
    },
    {
      "dayOfWeek": "WEDNESDAY",
      "checked": true
    },
    {
      "dayOfWeek": "THURSDAY",
      "checked": false
    },
    {
      "dayOfWeek": "FRIDAY",
      "checked": false
    },
    {
      "dayOfWeek": "SATURDAY",
      "checked": true
    },
    {
      "dayOfWeek": "SUNDAY",
      "checked": true
    }
  ],
  "uuid": "da8f56a2-625f-400d-800d-c975bead0cff",
  "taskSchedules": [],
  "isInitial": false,
  "hasChanged": false
}
Run Code Online (Sandbox Code Playgroud)

daysOfWeek我想确保至少有一个项目有checked: true.

到目前为止,这是我的验证模式(但不起作用):

const taskValidationSchema = Yup.object().shape({
  subject: Yup.string().required('Required'),
  description: Yup.string(),
  daysOfWeek: Yup.array()
    .of( …
Run Code Online (Sandbox Code Playgroud)

yup formik

11
推荐指数
2
解决办法
2万
查看次数

拦截器不起作用

我试图在AngularJS中制作拦截器.我对AngularJS很新,发现了一些Interceptor的例子,但是无法让它工作.

在这里,我有我的app.js文件,其中包含所有相关代码.我还有一个控制器调用REST api并返回JSONP.

首先,我声明模块然后配置它(定义Interceptor).它现在应该捕获所有请求并输出到控制台...

使用app.factory创建拦截器是错误的吗?

var app = angular.module(
    'TVPremieresApp',
    [
    'app.services'
      , 'app.controllers'
    ]
);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('errorInterceptor');
});

app.service('MessageService', function () {
    // angular strap alert directive supports multiple alerts. 
    // Usually this is a distraction to user. 
    //Let us limit the messages to one    
    this.messages = [];
    this.setError = function(msg) {
        this.setMessage(msg, 'error', 'Error:');
    };
    this.setSuccess = function(msg) {
        this.setMessage(msg, 'success', 'Success:');
    };
    this.setInfo = function (msg) {
        this.setMessage(msg, 'info', 'Info:');
    };    
    this.setMessage = function(content, type, …
Run Code Online (Sandbox Code Playgroud)

javascript interceptor angularjs angular-http-interceptors

10
推荐指数
1
解决办法
2万
查看次数

Material-ui:图标的轮廓版本

我在反应式Web应用程序中使用了material-ui.我需要组件中的"动作/描述"图标,但在大纲版本中.

根据文件:

为方便起见,Material-UI中提供了完整的Google Material图标集作为预构建的SVG Icon组件.

所以我可以这样做以获得"填充"版本:

import ActionDescription from 'material-ui/svg-icons/action/description'

<div className="number">
  <ActionDescription />
</div>
Run Code Online (Sandbox Code Playgroud)

但是我如何获得"大纲"版本?我试过用css但没有成功:

<div>
  <ActionDescription style={{black: "black"}} color="transparent" />
</div>
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui

9
推荐指数
2
解决办法
5353
查看次数

具有语义UI的React Datetime Picker组件反应示例

我找不到具有适当文档的React Datetime组件.我需要使用Semantic UI React在React项目中使用Datetime选择器.

我试过https://github.com/react-component/calendar但是无法让它正常运行......似乎选项非常有限(这是奇怪的顺便说一句......).

你能用这些库提供一个日期时间选择器的工作示例吗?

datetimepicker reactjs semantic-ui semantic-ui-react

7
推荐指数
2
解决办法
1万
查看次数

具有多个环境设置的 TypeORM

我想使用单独的数据库来运行测试。所以我尝试为多个环境(开发和测试)配置 TypeORM,但它不起作用。它仅使用“开发”配置。

这是我的 npm 脚本:

"scripts": {
    "start": "NODE_ENV=dev node dist/index.js",
    "test": "NODE_ENV=test mocha --reporter spec --compilers ts:ts-node/register 'test/**/*.test.ts'"
}
Run Code Online (Sandbox Code Playgroud)

如果我console.log(process.env.NODE_ENV)得到正确的结果(“开发”/“测试”)。

这是我的 ormconfig.json

[
  {
    "environment": "dev",
    "name": "default",
    "driver": {
      "type": "mysql",
      "host": "localhost",
      "port": 3306,
      "username": "root",
      "password": "",
      "database": "api"
    },
    "entities": [ "dist/model/*.js" ],
    "autoSchemaSync": true
  },
  {
    "environment": "test",
    "name": "default",
    "driver": {
      "type": "mysql",
      "host": "localhost",
      "port": 3306,
      "username": "root",
      "password": "",
      "database": "api_test"
    },
    "entities": [ "dist/model/*.js" ],
    "autoSchemaSync": true
  } …
Run Code Online (Sandbox Code Playgroud)

node.js typeorm

7
推荐指数
2
解决办法
7987
查看次数

设置 react-styleguidist、创建 React App、Typescript、Material UI 和 styled-components

我试图从 Create React App 3 (CRA)、Typescript、Material UI 和 styled-components 设置 react-styleguidist (RSG)。我被这个错误困住了:

./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'
Run Code Online (Sandbox Code Playgroud)

我按照文档为 MUI 主题和样式组件设置了一个包装器:https :
//react-styleguidist.js.org/docs/thirdparties.html#styled-components

/styleguidist/MuiThemeWrapper.tsx

./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'
Run Code Online (Sandbox Code Playgroud)

我的 styleguidist 配置:

/styleguidist.config.js

const path = require('path');
module.exports = {
    components: "src/components/**/layout.{js,jsx,ts,tsx}",
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json'
      ).parse,
    serverPort: 6161,
    styleguideComponents: {
      Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.jsx')
    }
};
Run Code Online (Sandbox Code Playgroud)

我的 tsconfig 遵循标准的 CRA / MUI 建议
https://material-ui.com/guides/typescript/

配置文件

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui styled-components react-styleguidist

7
推荐指数
1
解决办法
664
查看次数

Formik:为什么在 onSubmit 中设置超时?

我是 Formik React Forms lib 的新手。我想知道为什么我需要在 setTimeOut 中包装 onSubmit 代码:

来自网站的示例(https://jaredpalmer.com/formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-gt-void-promise

<Formik
    initialValues={{ name: 'jared' }}
    onSubmit={(values, actions) => {
        setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
        }, 1000);
    }}
>
Run Code Online (Sandbox Code Playgroud)

我在文档中找不到任何解释。据我所知,该函数既可以是同步的也可以是异步的...

https://jaredpalmer.com/formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-void-promise-any

formik

6
推荐指数
1
解决办法
834
查看次数

TypeError:无法通过Interceptor读取Angular中未定义的属性“数据”

调用RESTful服务时,我有一个拦截器来捕获HTTP错误:

services.config(function($httpProvider) {
    $httpProvider.responseInterceptors.push('globalInterceptor');

    var elementsList = $();

    // this message will appear for a defined amount of time and then vanish again
    var showMessage = function(content, cl, time) {
        $('<div/>')
            .addClass(cl)
            .hide()
            .fadeIn('fast')
            .delay(time)
            .fadeOut('fast', function() { $(this).remove(); })
            .appendTo(elementsList)
            .text(content);
    };
});

services.factory('globalInterceptor', function($q){
    //When the interceptor runs, it is passed a promise object
    return function(promise){

        //In an interceptor, we return another promise created by the .then function.
        return promise.then(function(successResponse){
            //Do your code here if the response was …
Run Code Online (Sandbox Code Playgroud)

javascript typeerror interceptor angularjs

5
推荐指数
1
解决办法
6211
查看次数

Angular Animate 1.4太快了

从Angular 1.2 - > 1.4更新后,我遇到动画问题.

我通过更改视图容器元素上的css类来设置页面过渡的动画.我使用ui-router并在元素上使用ng-class指令.用户使用箭头键(app.run()中的事件侦听器)进行导航.这将类设置为$ rootScope上的字符串变量'navDirection'(左/右).

更新后,似乎在动画之后设置了$ rootScope.navDirection.因此,当用户改变方向时动画是错误的.

任何建议和/或评论表示赞赏!

的index.html

<body ng-cloak ng-keydown="handleEvt($event)">
    <div class="page-wrapper page-wrapper--constrain" ng-class="{'page-wrapper--decorate' : decoratePageContent === true}">
        <div class="page-content group position-context">
            <div ui-view class="slide" ng-class="{'at-view-slide-in-left at-view-slide-out-right': navDirection == 'right', 'at-view-slide-in-right at-view-slide-out-left': navDirection == 'left'}"></div>
        </div>
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

app.js

var app = angular.module('my-app', [
    'ui.router',
    'ngAnimate'
]);

// ...

app.run(function ($rootScope, navigationService) {

    $rootScope.handleEvt = function(e) {
        if ($rootScope.navVisible) {
            switch (e.which) {
                // right
                case 37:
                    $rootScope.navDirection = "right";
                    navigationService.navigate(navigationService.getCurrentPageIndex() - 1);
                    break;
                // left …
Run Code Online (Sandbox Code Playgroud)

animation angularjs

5
推荐指数
1
解决办法
399
查看次数

猫鼬:查询日期范围

我试图获取特定日期范围内的所有文件.我在我的Express路由器中使用MomentJS和Mongoose.但结果集为空:

router.route("/bookings")

    // GET
    .get(function(req, res) {
        var start,
            end;

        // set time zone
        moment().tz("Europe/Copenhagen").format();

        start = moment(req.query.start * 1000).toDate();
        end = moment(req.query.end * 1000).toDate();

        Booking.
            find({
                startDate: {
                    $gte: start,
                    $lte: end
                }
            }).
            exec(function(err, bookings) {
                if (err) handleErr(res, err);

                console.log(err);
                console.log(bookings);

                res.json(bookings);
            });
    })
Run Code Online (Sandbox Code Playgroud)

该路由接收开始和结束日期为UNIX TIMESTAMPS(也来自客户端的MomentJS).

如果我从mongo shell查询,我会得到正确的文件:

db.bookings.find({startDate: { $gte: "2016-02-29T00:00:00+01:00", $lte: "2016-03-06T23:59:59+01:00" } }, {startDate: 1})
Run Code Online (Sandbox Code Playgroud)

如果我在console.log日期,我会得到与查询数据库时相同的格式.

我试过/没有UNIX*1000但没有运气...

我究竟做错了什么?

date mongoose mongodb momentjs

5
推荐指数
0
解决办法
8875
查看次数