小编aro*_*llo的帖子

所以我需要一双新鲜的眼睛来帮助我！我刚刚开始使用 apollo 的新钩子，它们非常酷！但是，当我尝试传递变量时遇到问题，它返回未定义。

我在 graphql 服务器中有这个查询，它点击了 REST API，但目前我只返回标量 JSON

fetchRecipes(calories: String!, meal: String!): JSON

在我的组件中：

  const { data, loading, error } = useQuery(FETCH_RECIPES, {
    variables: { calories: 500, meal: "beef" }
  });

const FETCH_RECIPES = gql`
  query FetchRecipes($calories: String, $meal: String) {
    fetchRecipes(calories: $calories, meal: $meal)
  }
`;

当我console.log(data)它回来时undefined，

然而，为什么这会起作用呢？（不通过 传递变量useQuery）

  query {
    fetchRecipes(calories: "500", meal: "beef")
  }

该组件如下所示：

const Recipes = () => {
  const { data, loading, error } = useQuery(FETCH_RECIPES, { …

我正在设置我的第一个 eslint。出于某种原因，它在其他计算机上工作，除了我的..

我正在使用 VScode

我一打开编辑器，就会收到以下消息：无法读取配置文件： /Users/user/Documents/repos/project/C:/mydirectory/.eslintrc.json Error: ENOENT: no such file or directory, open Source: ESLint (Extension)

.eslintrc.json 在我的根目录中。

这是我的配置文件：

{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "env": {
      "browser": true,
      "jest": true
    },
    "rules": {
      "quote-props": [2, "as-needed"],
      "comma-dangle": "error",
      "no-console": ["warn", { "allow": ["warn", "error"] }],
      "no-debugger": "error",
      "react/prop-types": 0,
      "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
      "object-curly-newline": ["error", { "multiline": true }],
      "no-underscore-dangle": 0,
      "jsx-a11y/click-events-have-key-events": 0,
      "jsx-a11y/anchor-is-valid": 0,
      "no-await-in-loop": 0,
      "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
      "arrow-parens": ["error", …

我目前正在为我的应用程序设置带有 MSAL 的 ADD。我遇到的问题是 api 设置为接受 Azure AD V1 令牌，但使用我当前的 MSAL 设置，我不断收到 Azure AD V2。

我团队中的其他人正在使用 ADAL，但我们想迁移到 MSAL。我确定我做错了什么，因为似乎很难相信没有向后兼容性。

这是我的 Msal 配置：

import * as Msal from 'msal';

export const applicationConfig = {
    clientID: process.env.REACT_APP_MSAL_CLIENT_ID,
    authority: process.env.REACT_APP_AUTHORITY_TENANT,
    graphScopes: ['user.read'],
    graphEndpoint: process.env.REACT_APP_GRAPH_ENDPOINT,
};

/**
 * will get the call back once the API is complete
 * (either complete or failure), redirects flows.
 * Is called after the authentication request is completed
 * successfully/failure
 *
 * @param {*} errorDesc
 * @param {*} token …

我正在开玩笑，并react-testing-library为我的应用程序提供单元测试范围。

我使用了这个方便的辅助函数Kent C. Dodds在他的一个视频中展示了它：

const renderWithRedux = ui => ({
    ...render(<Provider store={store}>{ui}</Provider>),
    store,
});

我在测试连接的组件时使用。

我遇到一个问题，为了渲染组件，我需要获取一些数据以准确地解决测试问题，或者至少将模拟数据注入存储中。我没有这样做

这是我的测试：

test('navbar accepts props', async () => {
    /**
     * Something I was testing
     */
    const functionToTest = () => async dispatch => {
        dispatch(fetchTickets());
    };

    functionToTest();
    const isReady = true;
    const mockData = {
        sessionInformation: {
            ticket: { label: 'Total Tickets' },
            sessionDuration: { sessionLabel: 'Session Duration', duration: 42 },
            equipment: { type: 'Desktop', operatingSystem: 'Windows' },
        },
        component: { isReady …

我有这种从对象数组呈现的卡片。

父组件：

[{foo: 'bar', baz: [{ name: string, path: string: '/'}]

state = {isHovering: false}

handleMouseHover = () => {
    const { isHovering } = this.state;
    this.setState({ isHovering: !isHovering });
}

;

我传递下来handleMouseHover()，并isHovering辞去道具子组件。

结果是这样的：

子组件

<LinkContainer
  onMouseEnter={handleMouseHover}
  onMouseLeave={handleMouseHover}
  className="linkContainer"
>

 {isHovering && (
   <FontAwesomeIcon
     icon="copy"
     className="copyIcon"
     onClick={copyToClipboard}
   />
 )}

结果是包含 3 个链接的 4 张卡片。每次我将鼠标悬停在链接上时，我都希望显示复制到剪贴板图标。然而，在那一刻，我将鼠标悬停在任何项目将其设置isHovering到true从而使所有的图标可见。理想情况下，我只希望我悬停在其上的链接图标变得可见。有人可以帮助我找出更好的解决方案或改进我已经编写的代码。

非常感激！

我从头开始引导我的第一个TypeScript + React项目。我成功完成了TypeScript和组件渲染。但是，当我尝试添加测试时，它只是由于某些类型错误而失败。

我尝试使用不同的配置，甚至添加setupTests.ts文件。

这是我的配置：package.json

{
  ....
      "dependencies": {
        "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/polyfill": "^7.4.0",
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-typescript": "^7.3.3",
        "@types/html-webpack-plugin": "^3.2.0",
        "@types/jest": "^24.0.11",
        "@types/react": "^16.8.10",
        "@types/react-dom": "^16.8.3",
        "@types/react-redux": "^7.0.6",
        "@types/react-router-dom": "^4.3.1",
        "@types/redux": "^3.6.0",
        "@types/redux-logger": "^3.0.7",
        "@types/redux-promise": "^0.5.28",
        "@types/webpack": "^4.4.26",
        "@typescript-eslint/eslint-plugin": "^1.5.0",
        "@typescript-eslint/parser": "^1.5.0",
        "babel-jest": "^24.5.0",
        "babel-loader": "^8.0.5",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^4.1.0",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-react-hooks": "^1.6.0",
        "html-webpack-plugin": "^3.2.0",
        "jest": "^24.5.0",
        "jest-dom": "^3.1.3",
        "prettier": "^1.16.4",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-redux": "^6.0.1",
        "react-router": …

我正在构建这个组件来测试 react-spring 库。我在codeandbox上启动它，然后将它本地拉到我的电脑上。当我把它拉下来时，这个错误出现了，我不知道如何解释它或导致它的原因。我对打字稿很陌生，因此非常感谢任何帮助。

起初，我认为它可能是childrenprop 的错误类型，但后来意识到它实际上是widthand height，现在我不确定它是否是一个styled-components（因为错误出现在 下StyledCard）或者当你使用子渲染 prop 方法时你必须指定你的类型不同..

import * as React from "react"
import styled from "styled-components"

const StyledCard = styled.div`
  width: ${(props: any) => props.width}px;
  height: ${(props: any) => props.height}px;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
`

interface ICardProps {
  children?: React.ReactNode
  width?: number
  height?: number
} …