Question

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

对于React中的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) {

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

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

Answer 1

您没弄错，我尝试了该演示，但它无法像您一样完全编译。

在每个setState（之后，删除... self.state。您应该很好。

作者可能改变了主意，用SetState代替了之前的说明，而忘记了一个更少的参数。

PS：如果您发现Board.js中的下划线字符（_）=>意味着什么，请告诉我。我也是新手，但在整个Google世界中都找不到提到要与箭头参数一起使用的下划线的信息，但他确实做到了，而且行得通。

react示例失败，出现以下错误：TypeError：传播无效实例的无效尝试

1 个答案: