小编Ota*_*der的帖子

我正在创建一个组件，我需要获取它的父<div>宽度和高度。我正在使用 Hooks，所以我所有的组件都是函数。我已经阅读了一些使用类的示例，但这不适用于我的组件。

所以我有这个组件：

export default function PlantationMap(props) {
    <div className="stage-canvas">
        <Stage
          width={window.innerWidth * 0.5}
          height={window.innerHeight * 0.5}
          onWheel={handleWheel}
          scaleX={stage.stageScale}
          scaleY={stage.stageScale}
          x={stage.stageX}
          y={stage.stageY}
          draggable
        / >
    </div>
}

我怎样才能获得<div>要使用的高度和宽度<Stage width={} height={} />？

非常感谢您提前

编辑：我尝试使用useRef()钩子，如下所示：

const div = useRef();

return (
  <div ref={div}>
  ...
  </div>
)

但我无法访问该div.current对象

我在我的 SPA 中使用 React Hooks。我知道它是如何工作的，但是在声明钩子时我有疑问，即我正在使用react-cookie并且钩子的声明是const [cookies, setCookie, removeCookie] = useCookies([]);.

就我而言，我只需要removeCookie var，我不会在我的功能页面中使用cookies和setCookie vars，因此lint抱怨未使用的变量。

可以忽略这两个vars吗？我试过了，const [..., ..., removeCookie] = useCookies([]);但这行不通。

提前致谢。

我正在使用 Recharts 绘制一些图表。根据数据数组的长度，图表不会从 x = 0 开始（不在 x 和 y 的交点处），也不会在 x 的最大值处结束：

如何强制它始终从 x = 0 开始并占据所有 x 轴？

这就是我实施它的方式：

        <ResponsiveContainer width="100%" height={400}>
            <ComposedChart
                data={chartContent.content.chart}
                //data={data}
                margin={{ top: 5, bottom: 5, left: 5 }}
            >
                <defs>
                    <linearGradient
                        id="colorBtc"
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                    >
                        <stop
                            offset="5%"
                            stopColor="#ff9500"
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor="#ff9500"
                            stopOpacity={0}
                        />
                    </linearGradient>
                    <linearGradient
                        id="colorStock"
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                    >
                        <stop
                            offset="5%"
                            stopColor="#00a1e4"
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor="#00a1e4"
                            stopOpacity={0}
                        />
                    </linearGradient>
                </defs>
                <XAxis
                    dataKey="date"
                    tickFormatter={formatDate}
                />
                <YAxis tickFormatter={formatYAxis} …

我正在将一些代码重构为 ES6 导入模式。我正在使用node 13.7.0.

我的package.json文件"type": "module"在顶部，但是当我运行我的脚本时，我得到

错误：找不到从 /Users/otaviobonder/WebstormProjects/newTE/back/src/server.js 导入的模块 /Users/otaviobonder/WebstormProjects/newTE/back/src/lib/Queue

我运行脚本 node --require dotenv/config src/server.js

我不明白为什么。我queue以import Queue from "./lib/Queue";in导入server.js，而我的Queue.js文件有一个默认导出：

import Queue from "bull";
import redisConfig from "../config/redis";
import * as Sentry from "@sentry/node";

import * as jobs from "../jobs";

Sentry.init({ dsn: process.env.SENTRY_DSN });

const queues = Object.values(jobs).map(job => ({
    bull: new Queue(job.key, { redis: redisConfig }),
    name: job.key,
    handle: job.handle,
    options: job.options
}));

export default { …

我正在创建一个调用 API 并将其响应存储在数据库中的 CronJob：

const CronJob = require("cron").CronJob;
const btc_price_ticker = require("../../controllers/BtcExchange/Ticker");
const currency = require("../../controllers/Currencies/CurrenciesController");

module.exports = new CronJob("* * * * * *", async function() {
  const {
    ticker: { sell }
  } = await btc_price_ticker.getBtcPrice();
  currency
    .update({
      params: {
        id: "5cbdf078f5bcec257fcec792"
      },
      body: {
        exchange_rate: sell,
        lastUpdate: Date.now()
      }
    })
    .catch(error => console.log(error));
});

它工作正常，但是我收到一个 TypeError: Cannot read property 'json' of undefined

我使用相同的函数来更新我在更新 API 时使用的数据库：

module.exports = {
  async update(req, res) {
    const currency = await Currency.findByIdAndUpdate(req.params.id, …

我正在实现一个当用户单击头像时打开的菜单。问题是菜单呈现在完全不同的位置：

头像是右侧绿色的“OB”按钮。没有控制台错误并检查Popover元素，它正在接收道具anchorEl：

头像右侧的语言菜单渲染得很好，在应该打开的地方打开。我的代码看起来不错，我真的不知道为什么这个位置是错误的：

export function DashboardNavbar({ setDrawer }) {
    // translation hook
    const { i18n } = useTranslation("navbar");

    // config drawer state
    const [configDrawer, setConfigDrawer] = useState(false);

    // config menu state
    const configMenuState = usePopupState({
        variant: "popover",
        popupId: "configMenu"
    });

    // avatar id
    const [cookie] = useCookies("userInfo");
    const decodedToken = decodeToken(cookie.userInfo.token);
    const avatarId =
        decodedToken.firstName.charAt(0) + decodedToken.lastName.charAt(0);

    function DesktopNavbar() {
        return (
            <>
                <StyledDashboardNavbar>
                    <Container maxWidth="lg">
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "flex-end"
                            }}
                        >
                            <Avatar
                                style={{ …

我正在学习 Node，并且正在从 Python 迁移当前的 API。我正在尝试创建一个 jwt 令牌来在第三方 API 中进行身份验证，但是我的函数返回undefined. 我用来签署令牌的 jwt 方法是async，所以我想我的函数不会等到 jwt 返回令牌。

这是我签名和创建 jwt 令牌的函数：

function token() {
  const payload = {
    iat: Math.floor(new Date() / 1000),
    exp: Math.floor(new Date() / 1000) + 30,
    sub: "api_key_jwt",
    iss: "external",
    jti: crypto.randomBytes(6).toString("hex")
  };
  return jwt.sign(payload, privatekey, { algorithm: "RS256" }, function(
    err,
    token2
  ) {
    return token2;
  });
}

所以，当我调用它时：

exports.genToken = function() {
  const header = {
    "x-api-key": api
  };
  const data = {
    kid: …

recharts我正在尝试添加使用某些货币的最新汇率的图表。数据显示正确，但图表始终从 0 开始，并略高于最大值。

该图表是正确的，但它不需要从 0 开始，因为这样做，它几乎是一条线。

这是图表的图片：

我希望它recharts可以自动计算价格变动，因此它会以低于数据最小值的方式开始，并以高于最大值的方式结束。

这是我的代码：

import React, { useEffect, useState } from "react";
import { StyledCurrencyChart } from "./styles";
import {
    AreaChart,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Area,
    ResponsiveContainer
} from "recharts";
import useExchangeRateProvider from "../../hooks/useExchangeRateProvider";
import api from "../../services/api";
import theme from "../../styles/customMuiTheme";
import moment from "moment";

function Chart({ data }) {
    return (
        <ResponsiveContainer width="100%" height={200}>
            <AreaChart
                width="100%"
                height={250}
                data={data}
                margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
            >
                <defs> …

我正在部署一个 NodeJS 项目，该项目使用 PostgreSQL 和 Prisma 到 Kubernetes。我创建了Dockerfile并且正在将 docker 镜像构建到 Docker Hub：

FROM node:lts-slim

WORKDIR /app

# Add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
ENV NODE_ENV=production

RUN apt-get update

# Install Chromium
RUN apt-get install chromium -y

# Install yarn
RUN apt-get install yarn -y

COPY package.json /app/package.json
RUN yarn install --silent

# Add app
COPY . /app

# Generate prisma
RUN yarn run generate

# Build the app
RUN yarn build

EXPOSE 4000

# Start the app …

我正在为我的 React 组件创建一个测试。该组件使用该window.dataLayer.push函数将事件发送到 Google 跟踪代码管理器。

测试时，我得到的window.dataLayer.push是undefined，然后我在我的文件中创建了一个模拟setupTests.ts：

import "@testing-library/jest-dom/extend-expect";
import { server } from "mocks/server";

beforeAll(() => {
  server.listen();
});
beforeEach(() => {
  Object.defineProperty(global, "window", {
    value: {
      dataLayer: {
        push: jest.fn(),
      },
    },
  });
});
afterEach(() => {
  server.resetHandlers();
});
afterAll(() => {
  server.close();
});

现在我得到了一个TypeError: Right-hand side of 'instanceof' is not an object. 这发生在我的render函数中：

TypeError: Right-hand side of 'instanceof' is not an object

       5 |
       6 | …

基本上我有一个对象数组。每个对象都有一个数组，我需要更改其值。

我正在使用React，所以这是一个状态：

[
  {
    "points": [
      60,
      5,
      60,
      20,
      70,
      20,
      70,
      15
    ],
    "finished": true,
    "color": "#6292C6"
  },
  {
    "points": [
      80,
      15,
      80,
      25,
      90,
      25
    ],
    "finished": true,
    "color": "#3FD971"
  },
  {
    "cultureName": "",
    "points": [],
    "finished": false
  }
]

更改points此状态的值的最佳方法是什么？我需要将它们乘以一个系数（4.96）。