小编Jos*_*man的帖子

未捕获的不变违规:重新渲染过多。React限制渲染次数以防止无限循环

我试图添加一个快餐栏,以便在用户登录或不登录时显示一条消息。SnackBar.jsx:

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import CloseIcon from "@material-ui/icons/Close";
import green from "@material-ui/core/colors/green";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";

const variantIcon = {
  success: CheckCircleIcon,
  error: ErrorIcon
};

const styles1 = theme => ({
  success: {
    backgroundColor: green[600]
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  icon: {
    fontSize: 20
  },
  iconVariant: {
    opacity: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux material-ui

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

如何将Atom设为我的默认编辑器?

每次我点击我想要处理的HTML文件时,Dreamweaver都会加载.如果我可以将Dreamweaver for atom作为默认值进行交换,那将会很棒.我无法弄清楚如何做到这一点.目前在OS X Yosemite 10.10.1和Atom版本0.165.0上.

macos default atom-editor

14
推荐指数
1
解决办法
1万
查看次数

如何使用cypress将数据输入iframe中的表单输入?

我一直在尝试使用cypress.io测试条带结帐表单

如果有人设法让这个工作,请告诉我.我在这里找到了一个关于这个问题的帖子https://github.com/cypress-io/cypress/issues/136并基于此我想出了:

   cy.get('iframe.stripe_checkout_app')
      .wait(10000)
      .then($iframe => {
        const iframe = $iframe.contents()
        const myInput0 = iframe.find('input:eq(0)')
        const myInput1 = iframe.find('input:eq(1)')
        const myInput2 = iframe.find('input:eq(2)')
        const myButton = iframe.find('button')

        cy
          .wrap(myInput0)
          .invoke('val', 4000056655665556)
          .trigger('change')
        cy
          .wrap(myInput1)
          .invoke('val', 112019)
          .trigger('change')

        cy
          .wrap(myInput2)
          .invoke('val', 424)
          .trigger('change')

        cy.wrap(myButton).click({ force: true })
      })
Run Code Online (Sandbox Code Playgroud)

但问题是条带形式仍然没有注册输入值.以下是http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8发生的一些小故事.基本上,表单不会注册更改输入触发器.

有谁知道如何使用cypress将数据输入到iframe中的表单中?

javascript testing cypress

9
推荐指数
3
解决办法
5931
查看次数

试图获取超出范围索引NaN(实时数据库)的帧

我正在尝试从firebase数据库渲染一些行,我收到此错误:

TaskQueue:任务错误:不变违规:尝试获取超出范围索引NaN的帧

  const { currentUser } = firebase.auth();
    var userfavorites = firebase.database().ref(`/users/${currentUser.uid}/favorites/`);
    userfavorites.once('value').then(snapshot => {
      this.setState({ userfav: snapshot.val() })
    })

...

  <FlatList
    data={this.state.userfav}
    renderItem={({ item }) => (
      <Text>{item.favdata}</Text>
    )}
  />
Run Code Online (Sandbox Code Playgroud)

数据库结构

firebase reactjs react-native firebase-realtime-database

7
推荐指数
2
解决办法
7883
查看次数

我将如何在 react-testing-library 中测试 react 路由器路由参数?

我正在使用 redux 和 react 路由器。

我想测试一个路由参数是否显示在页面上。

test('route param is displayed', async () => {
  const { queryByText } = customRender(
    <EditCard />,
    {
      route: '/card/1554990887217',
    }
  );
const cardId = queryByText(/1554990887217/);
await waitForElement(() => cardId);
})
Run Code Online (Sandbox Code Playgroud)

我的自定义渲染像这样包装路由器和 redux:

export const customRender = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    initialState,
    store = createStore(rootReducer, initialState),
    ...options
  } = {}
) => ({
  ...rtl(
    <Provider store={store}>
      <Router history={history}>{ui}</Router>
    </Provider>,
    options
  ),
  history,
});
Run Code Online (Sandbox Code Playgroud)

路线参数只是没有出现在测试中。它只是超时错误。

不过,它可以在页面上运行,因为如果我启动应用程序并手动测试它,一切都按预期运行。

javascript testing reactjs react-router react-testing-library

7
推荐指数
1
解决办法
4279
查看次数

有没有人成功使用 react-testing-library 来测试 DraftJS 编辑器组件上的更改事件?

fireEvent.change()只是不起作用。

它说元素上没有设置器。

我尝试改用咏叹调选择器

const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);
Run Code Online (Sandbox Code Playgroud)

我再次尝试使用查询选择器

const DraftEditor = container.querySelector('.public-DraftEditor-content'));
Run Code Online (Sandbox Code Playgroud)

改为尝试键盘事件。

没有。

有没有人设法使用draftjs 和反应测试库发送富文本输入文本?

javascript testing reactjs draftjs react-testing-library

7
推荐指数
1
解决办法
3050
查看次数

如何使用反应测试库测试临时加载文本?

我有一个表格,在处理时显示“正在提交”状态,在完成后显示“已提交”状态。

这是我正在使用的提交处理程序......

const handleSubmit = (e, _setTitle) => {
    e.preventDefault()
    _setTitle('Submitting...')
    try {
      doformStuff(emailRef.current.value)
    } catch (err) {
      throw new Error(err)
    } finally {
      _setTitle('Submitted perfectly.')
    }
  }
Run Code Online (Sandbox Code Playgroud)

我想测试提交状态是否出现,无论多短。

it('shows "submitting" when submitting', async () => {
    // arrange
    render(<MobileEmailCapture/>)
    // act
    const emailInput = screen.getByPlaceholderText('yourem@il.com')
    userEvent.type(emailInput, fakeEmail)
    fireEvent.submit(screen.getByTestId('form'))
    // assert
    expect(screen.getByTestId('title')).toHaveTextContent('Submitting...')
  })
Run Code Online (Sandbox Code Playgroud)

问题是测试直接跳转到提交状态 Error: FAILED Expected 'Submitted perfectly.' to match 'Submitting...'.

我知道这就是最终的结果,但我想测试临时过渡状态。我怎么做?

forms testing reactjs react-testing-library

7
推荐指数
1
解决办法
8611
查看次数

将对象数组添加到apollo-react中的变异中

我在前端使用react-apollo,在后端使用graphcool.我有一个突变,创建一个这样的教程:

const CREATE_TUTORIAL_MUTATION = gql`
  mutation CreateTutorialMutation(
    $author: String
    $link: String
    $title: String!
    $postedById: ID!
    $completed: Boolean!
  ) {
    createTutorial(
      author: $author
      link: $link
      title: $title
      postedById: $postedById
      completed: $completed
    ) {
      author
      link
      title
      postedBy {
        id
        name
      }
      completed
    }
  }
`
Run Code Online (Sandbox Code Playgroud)

它在提交处理程序中调用,如此...

this.props.createTutorialMutation({
      variables: {
        author,
        link,
        title,
        completed: false,
        postedById
      }
    })
Run Code Online (Sandbox Code Playgroud)

一切都很美妙.

现在我想在创建新教程时添加一组标记.我创建了输入字段并将其连接起来,以便tags变量是一个对象数组,每个对象都有一个标记id和标记文本.

如果我尝试将标记字段添加到变异中,则需要标量类型.但是对于一组对象似乎没有标量类型.

如果我在调用变异时将tag变量作为参数传递,我如何填充变异中的Scalar类型字段(在148行上这里https://github.com/joshpitzalis/path/blob/graphQL/src/ components/Add.js)和架构?

我是graphQL的新手,我明白我可能会以错误的方式接近这一点.如果是这种情况,我如何在graphQL中添加一个对象数组?

apollo reactjs graphql graphcool

6
推荐指数
1
解决办法
5081
查看次数

根据用户输入 handleChange 更改嵌套对象道具的状态

我有这个组件状态

this.state = {
      title: "",
      salary: {
        min: "",
        max: "",
        single: ""
      }
}
Run Code Online (Sandbox Code Playgroud)

我使用这个函数来处理用户输入

handleInputChange = (e) => {
    this.setState({[e.target.name]:e.target.value});
}
Run Code Online (Sandbox Code Playgroud)

它与

<input type="text" id="title" name="title" onChange={this.handleInputChange}/>
Run Code Online (Sandbox Code Playgroud)

我可以用这样的函数来改变 this.state.salary.min/max ...

我的意思是这种类型的函数可以与 state 中的嵌套对象一起使用<input/> name art吗?

javascript reactjs

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

如何使 React 组件可编辑?

在我学习 react 和 firebase 项目的最后阶段,我遇到了一个问题。通过阅读这两个的文档,我已经了解了在大多数情况下如何以及如何做。

我想从博客文章中获取内容,然后对其进行编辑并使用

update()
Run Code Online (Sandbox Code Playgroud)

方法 firebase 有。到目前为止,我面临的两个错误是我无法编辑该内容,因为 react 说它是一个受控元素,我从文档中了解到这是因为我将其作为值传入。

但是,当我尝试删除它并在 onInputChange 中创建一个 setState 时,就像文档建议的那样,它已更新但内容为空白,并且输入字段中也缺少原始文本。这意味着我在反应时做错了但我不确定它是什么。

这是目前设置代码的方式。问题的摘要归结为为什么我无法更改文本框中的值。请问我做错了什么?

javascript edit firebase reactjs

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