小编Hem*_*ari的帖子

Webpack 4:WOFF,WOFF2,SVG加载失败

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff中的错误1:4模块解析失败:意外字符''(1:4)您可能需要适当的加载程序来处理此文件类型。(此二进制文件省略了源代码)

WOFF文件无法加载,我不知道文件加载器为何无法加载WOFF,WOFF2和SVG。

这是我的Webpack 4加载程序配置:

module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                exclude: /node_modules/,
                loader: "file-loader"
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader",
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }
Run Code Online (Sandbox Code Playgroud)

请给我一个解决方案。

woff reactjs webpack webpack-dev-server woff2

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

两个孩子在React中具有相同的键

应用程序可以正常工作,我的类确实添加了一个新元素,但是我在控制台中看到以下警告!

警告:遇到两个具有相同密钥的孩子[object Object]。密钥应该是唯一的,以便组件在更新过程中保持其身份。非唯一键可能会导致子代重复和/或被忽略-该行为不受支持,并且可能在将来的版本中更改。在ContentBody中的div中(由ContentBody创建)

这是我的渲染部分:

 return (
            <div ref={this.myRef} style={this.state.myHomeStyle} >
              {this.state.elements.map((i: any) => {
                console.log(">>i>>>>", i);
                return <span style={i.myStyle} key={i} >{i}</span>;
              })}
            </div>
        );

// Where i init 
 public componentDidMount() {

    console.log('componentDidMount');
    this.myDOM  = this.myRef.current;
    this.myDOM.addEventListener(myEventsList.adaptCss, this.adaptCss);

    this.add(12,this.INLINE_TEST_ELE, null);
    this.add(13,this.INLINE_TEST_ELE, null);

  }


// Function add 
private add = (id: number, content: any, event: any ) => {

    let localArr: any[] = [];
    let mEvent: any = null;

    if (event !== undefined) {
      mEvent = event;
    }

    localArr = …
Run Code Online (Sandbox Code Playgroud)

key add reactjs

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

Http Interceptor无法工作在角度6

我已经使用httpintercept处理我的角度6项目中的数据服务中的401(未授权)错误.但httpintercept服务不接受我的项目.

这是我的intercept.services.ts文件

export class InterceptService  implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  // intercept request and add token
    intercept(request: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {

      // modify request
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${JSON.parse(localStorage.getItem('currentUser')).token}`
        }
      });

       console.log("----request----");

     console.log(request);

     console.log("--- end of request---");


      return next.handle(request)
      .pipe(
          tap(event => {
            if (event instanceof HttpResponse) {

              console.log(" all looks good");
              // http response status code
              console.log(event.status);
            }
          }, error => {
           // http response status code
              console.log("----response----");
              console.error("status code:");
              console.error(error.status);
              console.error(error.message);
              console.log("--- …
Run Code Online (Sandbox Code Playgroud)

angular angular6

2
推荐指数
1
解决办法
6451
查看次数

React中的getSnapshotBeforeUpdate()是什么?

我浏览了React的官方网站,了解新的生命周期方法 getSnapshotBeforeUpdate

但是我无法理解这种方法的优势以及确切的使用时间。

以下是来自docs的示例,它区分了两种方法。

getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
  const list = this.listRef.current;
  return list.scrollHeight - list.scrollTop;
}
return null;
}

componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
   // Adjust scroll so these new items don't push the old ones out of view.
   // (snapshot here is the …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native

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

React V16.7 TypeError:Object(...)不是函数

  import React, { useContext } from 'react';
  useContext is undefined.
Run Code Online (Sandbox Code Playgroud)

错误详情:

  Uncaught (in promise) TypeError: Object(...) is not a function
Run Code Online (Sandbox Code Playgroud)

处理时出错

   const context = useContext(UserContext);
Run Code Online (Sandbox Code Playgroud)

当前反应版本:

   "react": "^16.7",
  "react-dom": "^16.7",
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

2
推荐指数
1
解决办法
1017
查看次数

是否可以在材料ui芯片组件上添加工具提示?

要求是我有标签,例如:颜色和值,例如:橙色。所以我想将标签显示为工具提示,将值显示为芯片。芯片有可能吗?如果没有,我有没有其他办法可以实现这一目标。

我正在使用material-ui版本v0.18.7。

reactjs material-ui

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

node.js:导出普通函数还是箭头函数?

我正在尝试使用普通函数或箭头函数导出 .js 文件中的函数。但我不明白哪个是推荐的。

导出正常功能

module.exports = function(id) {
   console.log(id);
};
Run Code Online (Sandbox Code Playgroud)

导出箭头函数

const test = id => {
  console.log(id);
}
module.exports = test;
Run Code Online (Sandbox Code Playgroud)

以下是我心中的几个问题。

  1. 如果推荐普通函数而不是箭头函数,那为什么不推荐我使用箭头函数。

  2. 如果箭头函数比普通函数更推荐,那为什么不推荐我使用普通函数。

我怎么理解推荐的,尤其是在这种导出函数的场景中?

node.js ecmascript-5 ecmascript-6 arrow-functions

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

Swagger:跳过未知类型“dateTime”

在环回的swagger规范中指定日期和时间的数据类型时,我遇到警告/错误。下面是我的环回user.json文件

"properties": {
    "schedule": {
      "type": "dateTime",
      "required": true
    },
 }
Run Code Online (Sandbox Code Playgroud)

Swagger:跳过未知类型“dateTime”

请问我可以知道swagger中日期和时间的相关数据类型是什么吗?

loopback node.js swagger swagger-ui loopbackjs

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

以这种方式覆盖 React 状态数组是否好?

请这不是一个重复的问题。我的问题是,如果我将状态数组分配给局部变量并将值推送到局部变量,是否会导致错误。

我陷入了一种情况,以了解将值推入 React 状态数组或覆盖值时哪个是正确的。

根据 React 文档,以下代码是一种糟糕的风格并导致错误

   this.state = {
        list: []
  }

  componentDidMount(){
      const { list } = this.state;
      list.push(“test”);//this is bad style of pushing values into React state and causes a bug
      this.setState({list});
 }
Run Code Online (Sandbox Code Playgroud)

如果我像下面那样做,会导致错误吗?将状态列表分配给局部变量并将值推送到该局部变量并将数组的状态设置为列表。这和上面的代码一样吗?

  this.state = {
        list: []
  }
  componentDidMount(){
      const { list } = this.state;
      const array = list;
      array.push(“test”); //pushing values to a local variable  too a bad style and causes a bug in React?
      this.setState({list: array});
 }
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native

0
推荐指数
1
解决办法
3370
查看次数