小编Pab*_*rde的帖子

我正在使用一个有副作用的简单组件。我的测试通过了，但我收到警告Warning: An update to Hello inside a test was not wrapped in act(...).。

我也不知道这是否waitForElement是编写此测试的最佳方法。

我的组件

export default function Hello() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      setPosts(response.data);
    }

    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {
          posts.map(
            post => <li key={post.id}>{post.title}</li>
          )
        }
      </ul>
    </div>
  )
}

我的组件测试

import React from 'react';
import {render, cleanup, act } from '@testing-library/react';
import mockAxios from …

我用 React 和 Material-UI 构建了一个组件。我正在使用 React 和 Redux。

我的index.jsx看起来像这样：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/configureStore';
import Routes from '../routes/routes';
import '../styles/main.less';

const store = configureStore();
render(
  <Provider store={store}>
    <MuiThemeProvider>
      <Routes />
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('app'),
);

我的组件InputSearch如下所示：

import React, { PropTypes, Component } from 'react';
import TextField from 'material-ui/TextField';

class InputSearch extends Component {
  ...

  render() {
    return ( …

基本上我试图使用两个图标：

1. <i class="fas fa-heart"></i> 实心图标

2. <i class="far fa-heart"></i> 常规心形图标（概述）

我得到的第一个代码如下：

<FontAwesomeIcon icon={faHeart} />

我怎样才能得到第二个？

我遇到了mapStateToProps参数的问题.这似乎是一个非常简单的错误,但我无法弄清楚发生了什么.基本上,我正在尝试做的是使用react-redux切换侧边栏菜单并做出反应.一切正常,但我收到以下错误:

未捕获错误:连接组件侧栏时,mapStateToProps参数的类型对象值无效.

感谢任何帮助:

索引 app/js/index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from '../store/configureStore';
import Canvas from '../components/Canvas/Canvas';

const store = configureStore();

render(
  <Provider store={store}>
    <Canvas />
  </Provider>,
  document.getElementById('app'),
);

减速

(索引)app/reducers/index.js

import { combineReducers } from 'redux';
import sidebar from './sidebar';

const rootReducer = combineReducers({
  sidebar,
});

export default rootReducer;

(补充工具栏)app/reducers/sidebar.js

import {
  TOGGLE_SIDEBAR,
} from '../actions';

const sidebar = (state = { value: true }, …

抱歉，我是 Fable 和 F# 的新手。我从SAFE 项目开始了一个样板，我创建了一个包含两页的 SPA。但是，所有逻辑都在一个文件中。我的问题是。如何实现将每个视图放在一个文件中的路由器？

我想要这样的东西：

...
Client
  |_Client.fs
  |_Pages
      |_ Home.fs
      |_ About.fs
Server
  |_Server.fs
...

下面是我的 Client.fs 文件

src/客户端/Client.fs

(**
 - title: Navigation demo
 - tagline: The router sample ported from Elm
*)
module App

open Fable.Core
open Fable.Import
open Elmish
open Fable.Import.Browser
open Fable.PowerPack
open Elmish.Browser.Navigation
open Elmish.Browser.UrlParser


JsInterop.importAll "whatwg-fetch"

// Types
type Page = Home | Blog of int | Search of string

type Model =
  { page : Page
    query : …

我有一个节点应用程序。我的项目结构是这样的：

myApp
  |_ dist
  |_ node_modules
  |_ package.json
  |_ Procfile
  |_ webpack.config.js
  |_ src
      |_ assets
      |_ styles
      |_ vendors
      |_ js
          |_ app.js

app.js是我的切入点。在我的package.json中，我定义了以下脚本：

"scripts": {
    "build": "webpack -p --progress",
    "start": "webpack-dev-server"
}

以及我的Procfile

web: webpack-dev-server

这是我的webpack.config.js文件：

var path = require("path");
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/js/app.js'),

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        } …

我正在通过使用Webpack，webpack-dev-server和Jest测试套件来进行React项目。我的问题是：如何运行由webpack-dev-server触发的监视脚本，并允许Jest监视我的测试是否失败？

例：

我在我的package.json文件中想过类似的事情：

"scripts": {
  "build": "NODE_ENV=production webpack -p --config webpack.config.js",
  "watch": "webpack-dev-server --progress --colors --hot --inline && npm run test",
  "test": "jest"
      }

显然，这是行不通的。

以下是我的package.json文件和webpack.config.js文件。

package.json

{
"scripts": {
    "build": "NODE_ENV=production webpack -p --config webpack.config.js",
    "watch": "webpack-dev-server --progress --colors --hot --inline",
    "test": "jest"
  },
  "author": "Resultados Digitais",
  "license": "ISC",
  "jest": {
    "transform": {
      ".*": "./node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "unmockedModulePathPatterns": [
      "node_modules/react/",
      "node_modules/enzyme/"
    ]
  }
  . . .
}

webpack.config.json

var path = require('path');
var …

我有这个功能组件。

搜索.js

function Search() {
  const [term, setTerm] = useState('sun');

  function handleOnChange(e) {
    if (!e.target.value) {
      return false;
    }
    setTerm(e.target.value);
    return true;
  }

  return <input type="text" onChange={handleOnChange} placeholder="Search" />
}

搜索.test.js

import { render, fireEvent } from '@testing-library/react';
import Search from '.';

describe('when type a valid term', () => {
  it('update the state', () => {
    const { getByPlaceholderText } = render(<Search />;

    // this doesn't work. The handleOnChange method is private. How to deal with this?
    const handlerSpy = …

我想将同一类的多个列表的所有列表项存储在一个数组中。

举个例子：

<ul class="myList">
  <li>item 1</li>
  <li>item 2</li>
</ul>

<ul class="myList">
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

脚本文件：

var arr_list_items = [];

$('ul.myList').each(function(){
  while( !$(this).empty() ) {
    list_item = $(this).find('li:first');
    arr_list_items.push( list_item );
    list_item.remove();
  }
});

列表项被删除，但数组返回空。为什么？

我正在开发一个JQuery的Web表单,并通过post发送到PHP页面.

它看起来像这样:

$('#form-signup').submit(function(e)
{
    $.ajax(
    {
        type: 'POST',
        data: { name: $('#name').val() },
        url: 'signup_backend.php',
        success: function(data, textStatus, jqXHR)
        {
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            alert('error');
        }
    });

我的网络表单如下所示:

<form id="form-signup" action="">
    <fieldset>
        <label for="name">Nome</label>
        <input type="text" id="name" name="name" value="<?=$name?>"><span class="required">*</span>
    </fieldset>
    <fieldset>
        <label for="email">Email</label>
        <input type="email" id="email" name="email" value="<?=$email?>"><span class="required">*</span>
    </fieldset>
    <fieldset>
        <label for="tel">Telefone</label><input type="tel" id="tel" name="tel" value="<?=$tel?>"><span class="required">*</span>
    </fieldset>
    <fieldset>
        <div>
            <label class="blocker">Tipo de anunciante</label><span class="required">*</span>
        </div>
        <input type="radio" name="advertiser" id="advertiser_1">
        <label for="advertiser_1" class="aleft">Particular</label>
        <input type="radio" name="advertiser" …

我的摩托罗拉Moto G在Play商店出现错误.我无法购买任何应用程序.我总是得到DF-BPA-30错误.有人可以帮帮我吗？

谢谢

基本上，我有一个由移动设备中的物理键盘和触摸屏支持的统一游戏。我已经完成了物理键盘的移动脚本，现在我正在为触摸屏编写代码。

我怎样才能实现该检测功能？

我在想类似的事情......

private void HandleInput()
{
   if (detect if physical keyboard here...)
   {

        if  (Input.GetKey(KeyCode.RightArrow))
        {
            _normalizedHorizontalSpeed = 1;
        } 
        else if (Input.GetKey(KeyCode.LeftArrow))
        {
            _normalizedHorizontalSpeed = -1;
        }
   } else if (detect touch screen here...)
   {
       for (int i = 0; i < Input.touchCount; ++i)
       {
          if (Input.GetTouch(i).phase == TouchPhase.Began)
          {
             some code here...
          }
       }
   }
}

欣赏