小编Mic*_*orn的帖子

我收到一个 ReferenceError：

将 next.js 与 Leaflet.js 一起使用时未定义 window 。

想知道这个问题是否有一个简单的解决方案 - 使用 next.js 是否使我的工作流程过于复杂？

对于那些对确切代码感到好奇的人，

import React, { createRef, Component } from "react";
import L from "leaflet";
import { Map, TileLayer, Marker, Popup, DivOverlay } from "react-leaflet";
import axios from "axios";
import Header from "./Header";


export default class PDXMap extends Component {
  state = {
    hasLocation: false,
    latlng: {
      lat: 45.5127,
      lng: -122.679565
    },
    geoJSON: null
  };

  mapRef = createRef();

  componentDidMount() {
    this.addLegend();
    if (!this.state.hasLocation) {
      this.mapRef.current.leafletElement.locate({
        setView: true
      }); …

我是数据框中的一个位置，在 lat lon 列名称下方。我想在单独的数据框中显示离最近火车站的纬度有多远。

例如，我有一个经纬度（37.814563 144.970267），我有一个其他地理空间点的列表如下。我想找到最近的点，然后找到这些点之间的距离，作为郊区数据框中的额外列。

这是火车数据集的示例

<bound method NDFrame.to_clipboard of   STOP_ID                                          STOP_NAME   LATITUDE  \
0   19970             Royal Park Railway Station (Parkville) -37.781193   
1   19971  Flemington Bridge Railway Station (North Melbo... -37.788140   
2   19972         Macaulay Railway Station (North Melbourne) -37.794267   
3   19973   North Melbourne Railway Station (West Melbourne) -37.807419   
4   19974        Clifton Hill Railway Station (Clifton Hill) -37.788657   

    LONGITUDE TICKETZONE                                          ROUTEUSSP  \
0  144.952301          1                                            Upfield   
1  144.939323          1                                            Upfield   
2  144.936166          1                                            Upfield   
3  144.942570          1  Flemington,Sunbury,Upfield,Werribee,Williamsto...   
4  144.995417 …

我正试图在下面的热图中使用对数刻度.我需要一个0到30之间的数字的热图,然后是更大值的另一个颜色方案,可能是错误.

尝试了一些不同的方法,我仍然彻底混淆.感谢帮助.

干杯!

Row Labels  xyzazxaax  
00 - 01 hr  0.22    1.42    0.29    0.29    0.59    0.59    0.17    1.47    0.38    0.38    0.56    0.6 0.08    0.1 0.67    0.7 0.88    0.9 0.15    0.17    0.17    1.66    0.47    0.16    1.6 0.49    0.14    0.94    1.21    0.21    1.22    0.44
01 - 02 hr  0.08    0.77    0.08    0.07    0.24    0.24    0.1 0.73    0.08    0.09    0.21    0.23    0.05    0.06    0.21    0.23    0.29    0.29    0.1 0.1 0.08    0.83    0.17    0.1 0.77    0.18    0.08    0.4 0.57    0.07    0.64    0.18
02 - …

我正在使用 next.js 构建 PWA，但遇到了一些问题。

我正在尝试将设备运动集成到我的用户帐户和地理位置，然后是通知。

基于此存储库https://github.com/shadowwalker/next-pwa/和本教程https://medium.com/@sarafathulla/how-to-add-firebase-push-notifications-in -next-js-react-8eecc56b5cab。

除了这些 API 之外，还有https://whatwebcando.today/device-motion.html和https://whatwebcando.today/geolocation.html。

目前 PWA 是使用 next-pwa 的样板，

下一个.config.js

module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === 'development',
    dest: 'public',
    runtimeCaching,  
  },
  poweredByHeader: false,
},
withBundleAnalyzer(),

)

我很困惑如何将简单的设备运动集成到 PWA 中，以及如何整体向前推进。

如果有人能指出我正确的方向，那就太好了！与通常的 Web 开发代码非常不同。

我正在尝试将 next.js 与身份验证一起用于一个小项目。身份验证目前有效，但不允许我在导航栏中显示数据。

我最初将它与 firebase 一起使用，但不再使用了！！现在在下面单独设置身份验证。

这是示例存储库，其中包含用于 auth 和 next.js 的 API，我正在尝试将它们集成在一起，以便登录和注销使用 api 调用的标头集。

https://github.com/Hewlbern/example

只需获得基本的登录和注销功能，就可以控制用户对我网站的访问。我知道这真的很简单 - 只是很困惑如何使用 next.js 以及应用程序的文档页面如何工作：S

我正在尝试显示此 API 的输出表，并提供下载输出的 json（到 CSV 或其他格式）的能力。因此，在使用查询参数进行搜索之后，并且仅在用户登录后的页面上才能使用它是重点:)

这是我正在使用的登录功能示例。

import { useRef, useState } from 'react';
import React from 'react'
import PropTypes from 'prop-types'

import Layout from "../components/Layout";




export default function Login() {
  const emailRef = useRef<HTMLInputElement>(null);
  const passRef = useRef<HTMLInputElement>(null);
  const [message, setMessage] = useState<any>(null);
  async function handleLogin() {
    const resp = await fetch('http://localhost:3001/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': "application/x-www-form-urlencoded" …

我试图让一个组件只在我使用搜索按钮时呈现。

下面的代码是我当前的代码

更新

进行了更改，现在收到此错误。

错误] /home/holborn/Documents/Work/Portfolio/Data_Scraping/Eldritch/client/pages/index.tsx(21,19) 中的错误：21:19 找不到名称“产品”。19 | 接口 OutputProps { 20 | 搜索过？：字符串

21 | 产品列表？：产品[] | ^ 22 | 23 | 24 | const 输出：React.FC = ({ searched, productList }) => {

这是进行搜索时的产品列表数组

在遵循其他问题后，我收到此错误。

JSX element type 'void' is not a constructor function for JSX elements.
    262 | 
    263 |   return (
  > 264 |     <Output columns={columns} message={message} handleSearch={handleSearch} searchRef={searchRef} productList={productList}/>
        |     ^
    265 | 
    266 |   );
    267 | }

我有一个看起来像这样的数据集：

date    area_key    total_units timeatend   starthour   timedifference  vps
2020-01-15 08:22:39 0   9603    2020-01-15 16:32:39 8   29400.0 0.32663265306122446
2020-01-13 08:22:07 0   10273   2020-01-13 16:25:08 8   28981.0 0.35447362064801075
2020-01-23 07:16:55 3   5175    2020-01-23 14:32:44 7   26149.0 0.19790431756472524
2020-01-15 07:00:06 1   838     2020-01-15 07:46:29 7   2783.0  0.3011139058569889
2020-01-15 08:16:01 1   5840    2020-01-15 12:41:16 8   15915.0 0.3669494187873076

然后将其计算到其中以创建 kmeans 集群。

date    area_key    total_units timeatend   starthour   timedifference  vps
2020-01-15 08:22:39 0   9603    2020-01-15 16:32:39 8   29400.0 0.32663265306122446
2020-01-13 08:22:07 0   10273   2020-01-13 16:25:08 8   28981.0 …

我正在尝试使用我服药的通常时间（因此 + 4 小时以上）并在数据框中填写一个带有标签的数据框，为 2,1 或 0，用于我服用这种药物的时间，或服药后一小时为 2 小时，因为刚停药。

作为数据框的示例，我也尝试添加此列，

<bound method NDFrame.to_clipboard of                           id  sentiment  magnitude  angry  disgusted  fearful  \
created                                                                         
2020-05-21 12:00:00     23.0  -0.033333        0.5    NaN        NaN      NaN   
2020-05-21 12:15:00      NaN        NaN        NaN    NaN        NaN      NaN   
2020-05-21 12:30:00      NaN        NaN        NaN    NaN        NaN      NaN   
2020-05-21 12:45:00      NaN        NaN        NaN    NaN        NaN      NaN   
2020-05-21 13:00:00      NaN        NaN        NaN    NaN        NaN      NaN   
...                      ...        ...        ...    ...        ...      ...   
2021-04-20 00:45:00      NaN        NaN        NaN    NaN        NaN      NaN   
2021-04-20 01:00:00      NaN …

我试图让用户从当前设置中删除值。

我有一系列用户可以使用的设置值，这些值以药丸格式显示，他们可以单击 X 进行删除，即

export default function Pill({ value, handleChange }) {

  // const [times, setTimes] = useState([]);

    return (
      <div className="bg-gray-600 text-white text-xs px-2 py-0.5 w-max-content rounded-lg align-middle mr-1 mb-1">
        {value}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="inline-block align-middle cursor-pointer"
          onClick={() => handleChange(value, "remove")}
        >
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </div>
    );
  }

这用作如下组件，

{substanceDetails &&
              substanceDetails.map((subst) => (
                <Pill
                  registerInput={register}
                  optionLabel="substance"
                  value={subst.substance}
                  key={subst.substance} …

使用react-table，我可以很好地过滤数据，但希望它更动态

现在我正在努力完成的是过滤图表中的数据，使其更有意义，部分方法是将来自单一品牌的产品聚集在一个条形图中，以及删除过多的品牌，这些品牌使信息更难理解.

这是我正在使用的 Table 组件

import React from 'react'
import {
    useTable,
    usePagination,
    useSortBy,
    useFilters,
    useGroupBy,
    useExpanded,
    useRowSelect,
  } from 'react-table'
  import matchSorter from 'match-sorter'
  
  // import makeData from '../example/makedata.js'
  
  
  // Create an editable cell renderer
  const EditableCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateMyData, // This is a custom function that we supplied to our table instance
    editable,
  }) => {
    // We need to keep and update the state of the cell …