小编Tom*_*zyk的帖子

我已更新react-hot-loader到v.3.0.0,当我在组件中更改某些内容时,我在浏览器中获得更新,但我也在控制台中收到此警告:

React Hot Loader:Hot Loader不接受此组件.请检查它是作为顶级类,函数还是变量提取的.点击下方显示源位置:

问题是我没有在堆栈中看到任何表明我在哪里出错的东西.

webpack条目

client: [
  'react-hot-loader/patch',
  'webpack/hot/only-dev-server',
  'wicg-focus-ring',
  PATHS.clientBundleEntry,
],

eslint

"plugins": [
    "react-html-attrs",
    "transform-runtime",
    "transform-class-properties",
    "styled-jsx-postcss/babel",
    "react-hot-loader/babel"
  ]

client.jsx

function render() {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <BrowserRouter>
          {app}
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    document.getElementById('app'),
  );
}

render();
if (module.hot) {
  module.hot.accept('./app', () => { render(); });
}

编辑:

我改变了:

export default withRouter(
  connect(
    (state: ReduxState) => ({
      error: state.requestState.loginError,
    }),
    { loginUser },
  )(LoginContent),
);

成:

const withRouterLoginContent = withRouter(LoginContent);
export default connect( …

我有一个带有对象的文件,其中包含process.env属性:

env.js

console.log('LOADING env.js');

const {
  PROXY_PREFIX = '/api/',
  USE_PROXY = 'true',
  APP_PORT = '8080',
  API_URL = 'https://api.address.com/',
  NODE_ENV = 'production',
} = process.env;

const ENV = {
  PROXY_PREFIX,
  USE_PROXY,
  APP_PORT,
  API_URL,
  NODE_ENV,
};

module.exports.ENV = ENV;

现在我尝试使用不同的process.env属性测试此文件:

env.test.js

const envFilePath = '../../config/env';

describe('environmental variables', () => {
  const OLD_ENV = process.env;

  beforeEach(() => {
    process.env = { ...OLD_ENV };
    delete process.env.NODE_ENV;
  });

  afterEach(() => {
    process.env = OLD_ENV;
  });

  test('have default values', () => { …

我已将我的应用程序迁移到babel 7 beta版,除了测试之外,一切似乎都有效.我想我已经阅读了所有内容,但我仍然收到此错误:

●测试套件无法运行

Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely

Run Code Online (Sandbox Code Playgroud)

您的构建过程中的某些内容正在加载错误的版本.检查这个错误的堆栈跟踪,以寻找没有提到"@通天/芯"或"巴别塔芯",看看有什么在呼唤通天塔中的第一项.

  at throwVersionError (node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
  at Object.assertVersion (node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
  at _default (node_modules/@babel/plugin-proposal-class-properties/lib/index.js:81:7)
  at node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
      at Array.map (<anonymous>)

Run Code Online (Sandbox Code Playgroud)

测试套房:8次失败,共8次

babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "static": "./static",
        "common": "./src/common",
        "data": "./src/data"
      }
    }],
    ["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-sass"] }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

devDependencies

  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.49",
    "@babel/core": "^7.0.0-beta.49", …

我有测试代码影响其他测试并导致它们失败.当我孤立地运行测试用例时,一切都过去了,但是当我运行整个套装时,会有很多失败.如果你看下面的两个测试,你可以看到我在测试中覆盖了一个模拟模块,导致抛出异常.

HttpService.post = jest.fn(() => {
   return Promise.reject({ payload: 'rejected' });
});

在运行此行之后,所有需要原始HttpService.post模拟的测试都会失败,因为它们未被重置.在测试之后,如何正确地将我的模拟恢复到导入的模拟？我已经尝试jest.resetMock过beforeEach和类似于每个jest方法,但没有任何效果.我知道答案可能是直截了当的,但我对我在网上读到的有关如何导入代码的所有差异感到困惑(es6 import,commonJs).谢谢!

import HttpService from '../../services/httpService';
import handleErrors from '../../utilities/handleErrors';

jest.mock('../../services/httpService');
jest.mock('../../utilities/handleErrors');

describe('async actions', () => {

  beforeEach(() => {
    store = mockStore({});
  });

  describe('some describe that wraps both tests', () => {

    describe('a describe that wraps just the first test', () => {
      test(`creates ${constants.actions.REQUEST_SAVE_NOTE_FAILURE}`, () => {
        HttpService.post = jest.fn(() => {
          return Promise.reject({ payload: 'rejected' });
        });
        const expectedActions = [ …

使用这个例子：https : //ant.design/components/layout/#components-layout-demo-side

如何添加自定义图像或图标而不是默认图标。

我试过：

<Menu.Item to="/" key="2">
  <img className="ant-menu-item" src={require('image.png')} />
  <span>Shopify</span>
  <Link to="/shopify">Home</Link>
</Menu.Item>

但这看起来不太好或不尊重折叠行为

我知道我不应该直接在React中改变状态,但是当我使用函数时情况怎么样:

onSocialClick = e => {
    const id = e.target.value;
    this.setState((prevState, props) => {
        prevState[id] = !(prevState[id]);
        return prevState;
    });
};

修改传递的对象是错误的吗？

编辑:

事实证明,我们大多数人在这里都错了.React docs现在清楚地说明了这一点:

state是对应用更改时组件状态的引用.它不应该直接变异.相反,应该通过基于state和props的输入构建新对象来表示更改

感谢@TomášHübelbauer在评论中指出它.

我有定义的全局类型/flow-typed/redux.flow.js:

declare type Action = {|
  +type: string,
  +payload: any,
|}

declare type State = {|
  +ui: UI,
  +user: User,
  +team: Team,
  +projects: Project[],
  +profile: Profile,
|}

declare type UI = {|
  +isSliderOpen: boolean,
  +isModalVisible: boolean,
  +modalAction: string,
  +modalPayload: Object,
|}

...

我已将airbnb eslint配置添加到我的项目中,现在我得到:

type Props = {
  logout: () => Action, //error ESLint 'Action' is not defined.(no-undef)
  user: UserDetails, //error ESLint 'UserDetails' is not defined.(no-undef)
}

它的纯粹的eslint错误.一切都配置得当,流动本身就很开心.

如何告诉eslint这些类型确实被声明为全局？或者我应该将它们添加到某个忽略列表中？

MediaRecorder ondataavailable 工作成功一次。我需要获取 blob，获取 base64，发送到我的服务器，将此 base64 解码为音频 blob。这很奇怪。

例如，输出：

blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9

....

我只能听到 blob1，其他 blob 被“禁用”。

尝试一下！此代码记录音频：

window.startRecord = function(cb){
  var int;
  navigator.mediaDevices.getUserMedia({ audio: true , video:false}).then(function(stream){
    var options = {
      audioBitsPerSecond : 128000,
      videoBitsPerSecond : 2500000,
      mimeType : 'audio/webm\;codecs=opus'
    }

    if(!MediaRecorder.isTypeSupported(options['mimeType'])) options['mimeType'] =  "audio/ogg; codecs=opus";


    window.voice = new MediaRecorder(stream, options);

    voice.start(500);
    voice.ondataavailable = function(data){


      var reader = new FileReader();
      var blob = data.data;

      reader.readAsDataURL(blob);
      reader.onloadend = function () {
        var result = …

我不确定我做错了什么:

class Test extends React.Component {
  state = {};

  static getDerivedStateFromProps(nextProps) {
    return {};
  }

  render() {
    return null;
  }
}

我在React v16.3中遇到此错误:

warning.js:33警告:不会使用新组件API为组件调用不安全的旧式生命周期.

测试使用getDerivedStateFromProps(),但也包含以下遗留生命周期:componentWillReceiveProps

应删除上述生命周期.在此处详细了解此警告:

但它不包含componentWillReceiveProps......

我有一个.war文件,当我复制到我的Tomcat 9本地实例中的webapps文件夹时,它会成功部署.不知何故,当我尝试在Openshift齿轮(Tomcat 7)上运行它时,它不会被部署.我正在采取的步骤:

0:我克隆了远程存储库.

1:我将war文件复制到git repository中的webapps文件夹.

2:我把它推到远程仓库,我得到输出:

Writing objects: 100% (5/5), 4.50 KiB | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Stopping jbossews cartridge
remote: Sending SIGTERM to jboss:341147 ...
remote: Building git ref 'master', commit 90c82a4
remote: Skipping Maven build due to absence of pom.xml
remote: Preparing build for deployment
remote: Deployment id is a9215a94
remote: Activating deployment
remote: Starting jbossews cartridge
remote: Found 127.12.55.129:8080 listening port
remote: -------------------------
remote: Git Post-Receive …