小编Tay*_*tin的帖子

我安装了最新版本的webpack:

"webpack": "^4.0.0",
"webpack-cli": "^2.0.9"

然而,当我webpack在终端中运行时,我得到以下内容:

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

就像帖子中的问题一样，我需要能够搜索 3 种可能的情况。我需要全部大写，或小写，或正常大小写。

如果这是不可能的，有没有办法做一个不区分大小写的过滤器？

  allMarkdownRemark(filter: { brand: { eq: $normalBrand } }) { //==> Need more here
        edges {
            node {
                webImages {
                    url
                }
            }
        }
    }

我发现有些人这样做：

filter: { OR: [
  {brand: { eq: $normalBrand }}, 
  {brand: { eq: $normalBrand2 }}, 
  {brand: { eq: $normalBrand3 }}
]}

但它对我不起作用

我试图基本上只是改变一个计数器并显示该值已经改变。我正在这样做，getByTestId所以这可能是问题所在？

这是我的组件：

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [count, setCounter] = useState(0)
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
                div
                <div
                    onClick={() => setCounter(prevCount => prevCount + 1)}
                    data-testid="addCount"
                >
                    +
                </div>
        <div data-testid="count">
          {count}
        </div>
                <div
                    onClick={() => setCounter(prevCount => prevCount - 1)}
                    data-testid="minusCount"
                >
                    -
                </div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export …

我知道我可以禁用该文件或禁用该行，但我现在想在全局范围内执行此操作，因此我不必每次想将 auseEffect用作componentDidMount().

我努力了：

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "off"/0, // tried each
    "react-hooks/exhaustive-deps": "off"/0 // tried each
  },
  "overrides": [
        {
            "files": ["**/*.js"],
            "rules": {
                "react-hooks/rules-of-hooks": "off"/0, // tried each
                "react-hooks/exhaustive-deps": "off"/0 // tried each
            }
        }
    ]   
}

我有一个想法，这可能是因为我正在做一些样式设计来更改单选按钮，但是我不确定。我正在设置一个onClick事件，该事件两次调用了我的函数。我已删除它以确保它没有在其他地方被触发，并且onClick似乎是罪魁祸首。

<div
  className="CheckboxContainer"
  onClick={() =>
    this.changeShipping({ [k]: i })
  }
>
  <label>
    <div className="ShippingName">
      {shipOption.carrier
        ? shipOption.carrier.serviceType
        : null}{' '}
      {shipOption.name}
    </div>
    <div className="ShippingPrice">
      ${shipOption.amount}
    </div>
    <input
      type="radio"
      value={i}
      className="ShippingInput"
      onChange={() =>
        this.setState({
          shippingOption: {
            ...this.state.shippingOption,
            [k]: i
          }
        })
      }
      checked={
        this.state.shippingOption[k] === i
          ? true
          : false
      }
    />
    <span className="Checkbox" />
  </label>
</div>

我的功能目前仅是运输选项的简单控制台日志：

changeShipping(shipOption){
 console.log('clicked') // happening twice 
}

如果没有任何理由可以在这里看到为什么会发生这种情况，我可以发布其余代码，但是有很多方面，我认为这与之无关，但是我认为这是一个很好的起点。

完整代码：

import React, { Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Subscribe } …

我认为我只是错误地使用了这个模块，这就是我收到错误的原因。根据文档，我可以将解析器和模式数组传递给mergeSchemas来自 的函数graphql-tools。但我收到此错误：

Error: Apollo Server requires either an existing schema, modules or typeDefs

这是代码：

应用程序.js

import { ApolloServer } from 'apollo-server'
import schema from './modules'

const server = new ApolloServer({
    schema
})

server.listen().then(({ url }) => {
    console.log(` Server ready at ${url}`)
})

合并模式

import { mergeSchemas } from 'graphql-tools'

import bookSchema from './book/schema/book.gql'
import bookResolver from './book/resolvers/book'

export const schema = mergeSchemas({
    schemas: [bookSchema],
    resolvers: [bookResolver] // ==> Maybe I have to merge these before …

我对此进行了大量研究，并找到了相当多的解决方案。我已经找到了一种解决方法，并且希望能够正常transform工作transformIgnorePatterns。然而，我唯一能做的似乎就是在我的__mocks__文件夹中手动添加一些模拟模块。

不确定这是否是由于使用Nextjswith引起Jest的？

这是我的jest.config.js

const nextJest = require("next/jest");

const esModules = ["react-markdown", "rehype-raw", "remark-gfm"].join("|");

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    "^@/components/(.*)$": …

我到底在哪里调用 fitBounds 或 map.fitbounds 。一旦我有了界限或如何使用它，我就很困惑该把它放在哪里。我已将边界设置为本地边界状态。

我在这里看过这篇文章react-google-maps：how to use fitBounds, panBy, panTo, panToBounds public APIs? 要么我只是做不同的事情，要么因为它对我来说没有多大意义。

我创建了一个bounds常量，然后每次我做一个标记时，我都会将其中每个添加到边界中bounds.extends(Marker in here)

代码有点乱，所以我会指出我在其中执行此操作的位置。里面filterItemsByRadius是我创建和设置边界的地方。在地图函数的末尾，我认为将边界状态设置为边界。

/* global google */
import { default as React, Component } from 'react';
import raf from 'raf';
import canUseDOM from 'can-use-dom';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import {
  withGoogleMap,
  GoogleMap,
  Circle,
  InfoWindow,
  Marker,
  withScriptjs,
} from 'react-google-maps';
import geolib from 'geolib';
import { geolocated } from 'react-geolocated';
import …

我正在使用react-router-dom并且我猜测这是导致问题的原因，但我不知道从哪里开始寻找或如何解决它。我也收到类似的错误Warning: Did not expect server HTML to contain a <nav> in <div>。

正如我所说，我不确定在哪里查看，所以如果您认为某些代码会有所帮助，请告诉我，我会发布它。否则，我可以发布用于执行 SSR 的代码。

编辑：确切错误：Warning: Prophrefdid not match. Server: "/profile/5a073dc44cb45b00125e5c82" Client: "profile/5a073dc44cb45b00125e5c82"

我已经检查了客户端，它/profile/:id不确定它在哪里说没有/，至于<nav>in的另一个错误，我的标题中<div>有一个nav，但我不确定如何“修复”那个.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import serialize from 'serialize-javascript';
import { Helmet } from 'react-helmet'; …

我第一次使用React和Redux进行服务器端渲染,看起来有点困难.我收到警告:

Warning: Did not expect server HTML to contain a <li> in <ul>.

我看了这个,这意味着有一个html树不匹配.我不确定那是怎么回事.有没有明显的方法来解决它？这是我发出警告的代码.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import actions from '../actions';

class UsersList extends Component {
  componentDidMount() {
    if (this.props.users.length > 0) {
      return;
    }
    this.props.fetchUsers();
  }

  render() {
    const { users } = this.props;
    return (
      <div>
        <ul>
          {users.map(user => {
            return <li key={user.id}>{user.name}</li>;
          })}
        </ul>
      </div>
    );
  }
}

const stateToProps = state => {
  return {
    users: …