小编Ale*_*nov的帖子

当我将操作连接到extraReducers时发生此错误 我的代码是

export const fetchCountries = createAsyncThunk(
  `country`, 
  async (organizationId: string) => {

export const saveCountry = createAsyncThunk(
  `country`,
  async ({ } => {})

const regions = createSlice({
  name,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchCountries.pending, isFetching);
    builder.addCase(fetchCountries.rejected, error);
    builder.addCase(fetchCountries.fulfilled, (state, action) => {});

    builder.addCase(saveCountry.pending, isFetching);
    builder.addCase(saveCountry.rejected, error);
    builder.addCase(saveCountry.fulfilled, (state, {payload}) => {});

如果我运行我会收到此错误： Error: addCase cannot be called with two reducers for the same action type

我正在尝试使用 React-Bootstrap 作为道具应用边距和填充。

我通过了文档，但没有发现任何提及在那里添加填充或边距，因为它在官方引导程序文档（第 3和第 4 个）中。我知道它不能很好地支持 Bootstrap 4，所以尝试了两者。

我试图将 params 传递为p={1}，paddingxs={5}或者mt='1'但它无法识别其中任何一个。更多的尝试在 React-Bootstrap 文件夹中找到任何Spacing元素，但失败了。

填充和边距用作类名。但是我觉得没有 Bootstrap 类就一定有办法。一定有一种财产。

我有一个简单的react/redux应用程序，可以通过 命令行运行npm start，并从浏览器调试，但我想使用 继续其开发Intellij。不幸的是，考虑到我的网络开发经验水平，其中的建议片段没有提供足够的整体背景，无法提供很大帮助。我还没有找到一个简单的示例应用程序来用作确定该过程的模式。

主要问题：我可以打开 中的应用程序目录结构Intellij，查看我的小应用程序的所有文件，并毫无错误地构建它，所以我需要创建一个运行配置。我应该使用哪个配置模板，以及如何设置相关参数以便可以运行和调试它Intellij？

谢谢！

我想在单击特定元素时阻止 onBlur 事件：

<input type="text" onBlur={<call when I click outside of element except when I click on a specific element>} />

在某些例子中,我看到过这样的事情:

Footer.propTypes = {
  completedCount: PropTypes.number.isRequired,
  activeCount: PropTypes.number.isRequired,
  filter: PropTypes.string.isRequired,
  onClearCompleted: PropTypes.func.isRequired,
  onShow: PropTypes.func.isRequired
}

这些PropTypes真正在做什么？他们是不是很好或必须拥有？

如何在 VSCode 中打开自定义片段的自动完成功能？我在中创建我的片段javascriptreact.json

  "importReact": {
     "prefix": "import-stateless",
     "body": ["import React from 'react';"],
     "description": "import React statement"
  },

  "consolelog": {
     "prefix": "import-stateless",
     "body": ["console.log($1);"]
  }

并在 my_file.js 中使用：

import | from '|'
...
const variable = '';
console.log( | );
...

问题是：当我在 import 语句中输入rea或在 console.log 中输入varia 时 - VSCode 不建议将我的单词作为React或Variable完成 ，这只是自定义片段的问题，因为在手动输入时 import React from 'r它会自动完成单词React；

谢谢

有什么想法如何在 Cypress 中与 React 捆绑在一起模拟粘贴操作吗？

我的测试应该在粘贴操作后立即检查值。

我发现很少有基于 DOM 操作的解决方案，因为正如作者所说，它将更改直接粘贴到 DOM 输入字段，然后调用更改事件。

我试过的cy.get(selector).invoke('val', 'copy-pasted text').trigger('change');

这些解决方案无法按预期工作，因为 React 会自行操作 DOM，因此通过建议的方式“粘贴”会将更改直接推送到输入值，并且违反了 React 工作流程。

谢谢

如何在不使用cy.wait(XXX)或比较视图/元素高度的情况下等待同步scrollIntoView？

这就是我的想法：

const cyBrick = cy.get(selector);
    cyBrick.scrollIntoView().then( _ => {
      cyBrick
        .then(([$brick]) => {
          const brickBody = $brick.getBoundingClientRect();
          cyBrick.trigger('mousedown', {which: 1, pageX: brickBody.x, pageY: brickBody.y});
          ...
        });
    });

就我而言，我正在测试拖放所以我需要

1. 滚动到要拖动的元素；
2. 将鼠标放在元素上
3. 滚动到目标容器等等...

我还尝试了自定义命令

//commands.js
Cypress.Commands.add('scrollIntoViewAndUseThen', {prevSubject: true}, (subject) => {
  cy.wrap(subject).scrollIntoView().as('scrolling');
  cy.wait('@scrolling');
});

//mytest.spec.js
cyBrick.scrollIntoViewAndUseThen().then( _ => ...

但只允许root使用@；

此时我使用等待的解决方法 cyBrick.scrollIntoView().wait(500)

PS：我在文档中读到，scrollToView允许仅链接应该加速

我想在底部的一行中设置链接，例如“链接 1 左下角”、“链接 2 中心底部”、“链接 3 右下角”但“链接 2”不在 PC 和移动设备上居中。

HTML：

            <div>
                <a id="contact" href="/contact">Link 1</a>
                <a id="link" href="/repo">Link 2</a>
                <a id="api" href="/json">Link 3</a>
            </div>

CSS：

#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    display: inline;
    font-size: 30px;
    padding-right: 2.5%;
}

现在的样子

我尝试在子级中使用并覆盖父级方法，但得到 Uncaught TypeError: Cannot read property 'call' of undefined

class BreadcrumbsHome extends React.Component {
  getBreadcrumbs = () => [{name: 'home', url: '/'}];

  render() {
    return <nav>
      <ol className="breadcrumb float-sm-right">
        {!!this.getBreadcrumbs && this.getBreadcrumbs().map((e, i, arr) =>
          <li className={`breadcrumb-item ${i === arr.length - 1 ? 'active' : ''}`}><a
            href={APP_CONTEXT + e.url}>{e.name}</a>/</li>
        )}
      </ol>
    </nav>
  }
}

class BreadcrumbsTypes extends BreadcrumbsHome {

  getBreadcrumbs = () => [
    ...super.getBreadcrumbs(),
    ...this.props.path
  ]

当我读到这个问题时。似乎与 babel 捆绑在一起，所以我尝试添加该//noprotect行

我想处理 ES6 并避免这种方式 ParentClass.prototype.myMethod.call(this, arg1, arg2, ..)

有什么想法可以解决这个问题吗？