时间戳

首页 > 解决方案 > 反应示例失败：TypeError：传播不可迭代实例的无效尝试

reactjs - 反应示例失败：TypeError：传播不可迭代实例的无效尝试

问题描述

我找到了这个教程： https ://blog.logrocket.com/beyond-rest-using-websockets-for-two-way-communication-in-your-react-app-884eff6655f5

对于反应中的 websocket 示例，它似乎不能开箱即用。

tmp/connect4-master$ ls
client  LICENSE  package.json  README2.md  README.md  server.js  yarn.lock





tmp/connect4-master$ npm install

> nodemon@1.18.4 postinstall tmp/connect4-master/node_modules/nodemon
> node bin/postinstall || exit 0

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN connect4@1.0.0 No repository field.
npm WARN connect4@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 341 packages from 205 contributors and audited 2499 packages in 7.897s
found 0 vulnerabilities






tmp/connect4-master$ npm run dev

> connect4@1.0.0 dev tmp/connect4-master
> concurrently --kill-others-on-fail "yarn server" "yarn client"

yarn run v1.10.1
yarn run v1.10.1
$ nodemon server.js
$ cd client && yarn start
[0] [nodemon] 1.18.4
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: *.*
[0] [nodemon] starting `node server.js`
$ react-scripts start
[1] /bin/sh: 1: react-scripts: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[1] yarn client exited with code 1
--> Sending SIGTERM to other processes..
[0] yarn server exited with code null
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! connect4@1.0.0 dev: `concurrently --kill-others-on-fail "yarn server" "yarn client"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the connect4@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     .npm/_logs/2018-10-21T15_41_34_742Z-debug.log





tmp/connect4-master$ npm install react react-dom react-scripts
npm WARN connect4@1.0.0 No repository field.
npm WARN connect4@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ react-dom@16.5.2
+ react@16.5.2
added 7 packages from 3 contributors and audited 2519 packages in 3.218s
found 0 vulnerabilities






tmp/connect4-master$ npm run dev

> connect4@1.0.0 dev tmp/connect4-master
> concurrently --kill-others-on-fail "yarn server" "yarn client"

yarn run v1.10.1
yarn run v1.10.1
$ nodemon server.js
$ cd client && yarn start
[0] [nodemon] 1.18.4
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: *.*
[0] [nodemon] starting `node server.js`
$ react-scripts start
[0] Listening on port 1337...
[1] 
[1] Set target browsers: >0.2%, not dead, not ie <= 11, not op_mini all
[1] 
[0] [nodemon] restarting due to changes...
[0] [nodemon] starting `node server.js`
[0] Listening on port 1337...
[1] Starting the development server...
[1] 
[1] Compiled successfully!
[1] 
[1] You can now view connect4 in the browser.
[1] 
[1]   Local:            http://localhost:3000/
[1]   On Your Network:  http://192.168.10.116:3000/
[1] 
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.
[1]

现在的错误：

TypeError: Invalid attempt to spread non-iterable instance
_nonIterableSpread
node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js:2

  1 | export default function _nonIterableSpread() {
> 2 |   throw new TypeError("Invalid attempt to spread non-iterable instance");
  3 | }

_toConsumableArray
node_modules/@babel/runtime/helpers/esm/toConsumableArray.js:5

  2 | import iterableToArray from "./iterableToArray";
  3 | import nonIterableSpread from "./nonIterableSpread";
  4 | export default function _toConsumableArray(arr) {
> 5 |   return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
  6 | }

App/<
src/App.js:24

  21 |   this.setState(...self.state, {board: board})
  22 | });
  23 | this.state.socket.on('color', color => {
> 24 |   this.setState(...self.state, {color: color})
     | ^  25 | });
  26 | this.state.socket.on('turn', player => {
  27 |   if (player === this.state.color) {

作者，或者我，哪里出错了？

有趣的是，游戏在第一个浏览器选项卡中显示了片刻，然后被错误替换。

标签： reactjs

解决方案

你没有弄错，我尝试了演示，它无法像你一样编译。

删除 ...self.state，在每个 setState( 之后，你应该很高兴。

作者可能改变了主意，用 SetState 替换了之前的指令，忘记了少了一个参数。

PS：如果您发现下划线字符 (_) => 在 Board.js 中的含义，请告诉我。我也是一个新手，但在整个谷歌世界中找不到任何地方提到要与箭头参数一起使用的下划线......但他做到了并且它有效。

推荐阅读