小编Mik*_*ing的帖子

在我的React项目中获取"无法将类作为函数调用"

我正在尝试将React地图组件添加到我的项目中但遇到错误.我正在使用Fullstack React的博客文章作为参考.我跟踪了google_map.js第83行中出现错误的位置:

function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
    } 
  }
Run Code Online (Sandbox Code Playgroud)

到目前为止,这是我的地图组件.当我注释掉第58-60行,最后三行时,页面加载得很好(没有地图).编辑:我做了@Dmitriy Nevzorov建议的更改,它仍然给我同样的错误.

import React from 'react'
import GoogleApiComponent from 'google-map-react'

export class LocationsContainer extends React.Component {
    constructor() {
        super()
    }
  render() {
    const style = {
        width: '100vw',
        height: '100vh'
    }
    return (
      <div style={style}>
        <Map google={this.props.google} />
      </div>
    )
  }
}

export class Map extends React.Component {
    componentDidUpdate(prevProps, prevState){
        if (prevProps.google !== this.props.google){
            this.loadMap();
        } …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps ecmascript-6 reactjs react-router

110
推荐指数
12
解决办法
13万
查看次数

REST API 架构:如何表示连接表

我有一个复杂的查询,它连接三个表并返回一组行,每行都有来自它的同级表的数据。如何以 RESTful 方式表示这一点?

FWIW 我知道不一定有“正确”的方法来做到这一点,但我有兴趣了解什么可能是这种情况下最可扩展和最持久的解决方案。

背景

在过去,我代表了或多或少反映了 url 字面结构的单个表。例如,该 urlGET /agents/1/policies将导致类似select * from policies where agent_id = 1.

假设

似乎 url 不一定必须与数据库层的结构如此紧密地耦合。例如,如果复杂查询类似于:

select
  agent.name as agent_name,
  policy.status as policy_status,
  vehicle.year as vehicle_year
from
  policies as policy
  join agents as agent on policy.agent_id = agent.id
  join vehicles as vehicle on vehicle.policy_id = policy.id
where 1=1
  and policy.status = 'active';

# outputs something like:
{ "agent_name": "steve", "policy_status": "single", "vehicle_year": "1999" }
Run Code Online (Sandbox Code Playgroud)

我可以将此 QUERY 表示为 url 而不是 …

sql sql-server rest api-design

17
推荐指数
1
解决办法
8380
查看次数

向 Google Places API 发送详细信息请求 -(CORS 错误)

在我正在处理的这个项目中,我正在尝试使用来自 Google Places API 的照片来扩充我所拥有的公共艺术品照片集。这里表示您可以发送详细信息请求来获取十张照片的数组。最终,我将解压响应以获取每张照片的 Google照片参考,并对数组中的每张照片发出请求并显示它。

不幸的是,当我发送详细信息请求时,这个计划就中断了。这就是我收到的确切错误:

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Run Code Online (Sandbox Code Playgroud)

我从本地主机运行这个程序,我很确定这很重要。我的所有其他 API 调用(Google Maps API 和其他几个)都是按照原样编写的,所以我有点困惑为什么会收到错误。这是相关代码:

The actual API call:

export function getPhotos(placeID) {
  let obj = {
    method: 'GET'
  };
  return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY')
    .then((response) …
Run Code Online (Sandbox Code Playgroud)

google-maps-api-3 cors google-places-api reactjs isomorphic-fetch-api

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

使用 Rollup 构建 Nx 库不会捆绑所需的依赖项

问题

我使用默认的 Rollup 执行器来构建一个 Nx 库,稍后我将在类似浏览器的环境中运行该库。生成的包不能包含imports 或requires。运行nx run ssr-bundle:build应该创建一个包含我的应用程序代码和依赖项的单个包。

如何捆绑我的所有代码,以便我的imported 代码位于同一个文件中?

例子

源文件index.ts

import { isBoolean } from 'lodash';

async function handler() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(isBoolean);
    }, 1000);
  });
}

export default handler;
Run Code Online (Sandbox Code Playgroud)

输出文件index.cjs.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var lodash = require('lodash'); <--------- this should be the lodash source code

async function handler() {
  return new Promise((resolve) => …
Run Code Online (Sandbox Code Playgroud)

javascript rollup webpack nrwl-nx

8
推荐指数
1
解决办法
1818
查看次数

在HackerRank上使用JavaScript时,有人可以帮助我理解Node.js代码的目的吗?

我遇到了一个编码挑战,它将使用我不熟悉的HackerRank。在开始之前,我开始尝试熟悉它,并在编辑器中看到这种样板式的代码时,会感到惊讶!

process.stdin.resume();
process.stdin.setEncoding('ascii');

var input_stdin = "";
var input_stdin_array = "";
var input_currentline = 0;

process.stdin.on('data', function (data) {
    input_stdin += data;
});

process.stdin.on('end', function () {
    input_stdin_array = input_stdin.split("\n");
    main();    
});

function readLine() {
    return input_stdin_array[input_currentline++];
}
Run Code Online (Sandbox Code Playgroud)

人力资源方面的其他挑战都对此做了些微修改,我不禁想知道到底发生了什么。看来编辑器正在读取某种文本文件,因此能够与我的输出进行比较?

我非常感谢对此有任何见解,因为我很确定在进行编码挑战时必须编写自己的Node“样板”。

谢谢!

javascript testing node.js

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

如何编写参数化的sql查询以防止SQL注入?

我最初发现当我尝试搜索带有主题标签的术语时,这是一个问题,事实证明它是SQL中的注释分隔符.搜索没有返回任何内容,因为它忽略了hashtag后面的#term.

所以现在我无法找到逃避用户输入的正确方法.在我看来,这既解决了标签问题,也解决了更大的问题,SQL注入.

以下是我正在使用的片段:

function (term) {
  term = term.toLowerCase()
  return db('ticket')
    .select('*')
    .where(db.raw('lower(question)'), 'like', `%${term}%`)
    .orWhere(db.raw('lower(note)'), 'like', `%${term}%`)
    .orWhere(db.raw('lower(user_name)'), 'like', `%${term}%`)
}
Run Code Online (Sandbox Code Playgroud)

我也发现这个这个 SO文章似乎很近,还有几个其他的事情.此外,Knex的文档和其他来源建议参数化绑定作为防止SQL注入的方法.

我很难找到一个可以用JavaScript或使用Knex向我解释的明确示例.

javascript sql postgresql knex.js

4
推荐指数
1
解决办法
3006
查看次数

对交互式脚本使用 yes 会导致退出代码 141

我需要在 CircleCI 中运行一个命令,它将预先确定的参数传递给以下命令。当命令只需要字符串或整数时,它可以很好地使用:

printf "arg1\narg2\n" | my_command
Run Code Online (Sandbox Code Playgroud)

但是,如果“我的命令”希望用户使用箭头键来选择一个选项,然后是返回键,则此方法将失败。

这是我所描述的一个例子:

? Which variation would you like to apply? (Use arrow keys)
? A
  B
  C
Run Code Online (Sandbox Code Playgroud)

所以我尝试了另一种选择,找到了一个名为 yes 的漂亮工具:

yes | my_command
Run Code Online (Sandbox Code Playgroud)

这实际上会起作用(并选择选项 A),但由于退出代码 141,它会导致 CircleCI 中的构建失败。据我所知,发生退出代码是因为 yes 仍在向已退出的进程发送输入。

我还有其他方法可以完成吗?

bash printf circleci

3
推荐指数
2
解决办法
899
查看次数

在JS中生成随机生成的十六进制颜色的互补十六进制颜色?

据我了解,您可以通过从白色中减去已知颜色(#FFFFFF)来获得给定十六进制颜色的补色。就我而言,已知颜色是我使用以下代码随机生成的颜色:

var randomColor = "#000000".replace(/0/g,function(){
return (~~(Math.random()*16)).toString(16);});
Run Code Online (Sandbox Code Playgroud)

我基本上想这样做:

function compColor(randomColor){
    return 0xFFFFFF - randomColor;
}
Run Code Online (Sandbox Code Playgroud)

我有这个随机的十六进制数,但我无法从十进制中减去它。我是否需要从十六进制转换为十进制,然后再次转换回十六进制才能获得我正在寻找的互补颜色?这似乎不是最有效的方法。

javascript random hex colors

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

使用 Fastify 和 AJV 验证请求模式

背景

我正在使用 Fastify 构建 API,这是我第一次使用 JSON 模式验证。我们的想法是,它既可以提高服务器代码的效率,又可以帮助我们的开发人员学习如何使用我的 API。

问题

我正在尝试验证允许客户端仅按名称查询小猫的路由。一个成功形成的查询看起来是/kittens?name=fluffykins

我这条路线的架构如下所示:

{
  querystring: {
    type: 'object',
    name: { type: 'string' },
  }
}
Run Code Online (Sandbox Code Playgroud)

如何让我的模式验证器只接受查询name并拒绝其他查询,例如/kittens?age=1?我更喜欢模式验证器独立于我的控制器代码处理它,并且它还支持我们将来可能添加的查询。

谢谢!

validation json jsonschema ajv

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