小编ahe*_*iot的帖子

从组件状态中的数组中删除元素

我试图找到从组件状态中的数组中删除元素的最佳方法.既然我不应该this.state直接修改变量,那么从数组中删除元素是否有更好的方法(更简洁)?

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },
Run Code Online (Sandbox Code Playgroud)

谢谢.

更新

这已更新为使用setState中的回调.这应该在更新时引用当前状态时完成.

javascript reactjs

126
推荐指数
4
解决办法
9万
查看次数

HtmlWebpackPlugin注入相对路径文件,这些文件在加载非根网站路径时会中断

我使用webpack和HtmlWebpackPlugin将捆绑的js和css注入到html模板文件中.

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),
Run Code Online (Sandbox Code Playgroud)

它会生成以下html文件.

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="main-295c5189923694ec44ac.min.js"></script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这在访问应用程序的根目录时工作正常localhost:3000/,但是当我尝试从另一个URL访问应用程序时失败,例如,localhost:3000/items/1因为捆绑的文件没有注入绝对路径.加载html文件时,它将在不存在的/items目录中查找js文件,因为react-router尚未加载.

如何让HtmlWebpackPlugin注入具有绝对路径的文件,所以express将在我的/dist目录的根目录中查找它们而不是在/dist/items/main-...min.js?或者也许我可以更改我的快速服务器来解决这个问题?

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});
Run Code Online (Sandbox Code Playgroud)

基本上,我只需要得到这条线:

<script src="main...js"></script>
Run Code Online (Sandbox Code Playgroud)

在源的开头有一个斜杠.

<script src="/main...js></script>
Run Code Online (Sandbox Code Playgroud)

javascript express webpack react-router

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

如何在不修改 git 历史记录的情况下在我的源代码上运行代码格式化程序?

我正在尝试使用代码格式化工具格式化整个 repo。这样做时,我想保留有关谁提交了哪一行的信息,以便像这样的命令git blame仍然显示正确的信息。我的意思是它应该显示之前编辑过每一行的作者(在格式化之前)。

有 git filter-branch 命令,它允许您从时间开始对 repo 的每个修订版运行命令。

git filter-branch --tree-filter '\
  npx prettier --write "src/main/web/app/**/**.{js, jsx}" || \
  echo "Error: no JS files found or invalid syntax"' \
  -- --all
Run Code Online (Sandbox Code Playgroud)

运行它需要很长时间,而且我真的不在乎过去。我只想在不更改每一行的所有权的情况下格式化 master 分支。我怎样才能做到这一点?我尝试使用rev-list最后的和其他过滤器类型,但它仍然不起作用。必须有一种方法来格式化代码库,同时保留每一行的作者信息。

git formatting git-filter-branch prettier

19
推荐指数
3
解决办法
6412
查看次数

深度分配JavaScript对象文字

我试图在一个对象中深入分配一个值.例如:

const errors = {}
if(errorOnSpecificField) {
  // TypeError: Cannot read property 'subSubCategory' of undefined(…)
  errors.subCategory.subSubCategory.fieldWithError = 'Error Message'
}
Run Code Online (Sandbox Code Playgroud)

现在,没有lodash,我可以这样做:

const errors = {}
if(errorOnSpecificField) {
    errors.subCategory = errors.SubCategory || {}
    errors.subCategory.subSubCategory = errors.SubCategory.subSubCategory || {}
    errors.subCategory.subSubCategory.fieldWithError = 'Error Message'
}
Run Code Online (Sandbox Code Playgroud)

有了lodash,我可以这样做:

const errors = {}
if(errorOnSpecificField) {
    _.set(errors, 'subCategory.subSubCategory.fieldWithError', 'Error Message');
}
Run Code Online (Sandbox Code Playgroud)

我试图避免使用第三方库.是否有更优雅的解决方案,特别是现在es2015有对象解构.逆操作很简单:

  let {subCategory : {subSubCategory: {fieldWithError}}} = errors
Run Code Online (Sandbox Code Playgroud)

什么是深层对象分配的优雅解决方案?谢谢!

javascript ecmascript-6

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

Puppeteer:如何使用 chrome 无头浏览器 api 下载文件?

使用 Puppeteer,如何让无头 chrome 浏览器下载文件(或发出额外的 http 请求并保存响应)?

web-scraping google-chrome-headless puppeteer

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

确定浏览器是使用移动数据还是wifi?

我怀疑答案是否定的,但我想我还是会问。有没有办法检测移动设备上的浏览器(例如 Android 上的 Chrome)是否正在使用 WiFi 或蜂窝数据连接到互联网?

javascript browser mobile

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

在Mac OSX Lion上无法解析http:// localhost:8080 /

我正在尝试在我的Mac上使用本地服务器,但似乎忽略了/ etc/hosts文件中的localhost设置.找到几个解决方案要重新安装的页面,并将localhost放到/ etc/hosts等的第一个位置......我相信这些不仅仅是需要的.

有人还有同样的问题吗?

localhost osx-lion

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