问题描述
我的问题是前几天它表现得很好。我检查了一个 devcopy 以从我离开的地方继续并且只安装了 npm 包,没有更改任何代码。我希望看到它呈现得很好,没有任何问题,但出现错误消息:语法错误 - 意外标记。
99 |
100 | return (
> 101 | <>
| ^
102 | {/* Link to scoreboard */}
103 | <Link to="/" className="board-link">Return to scoreboard?</Link>
104 |
我曾尝试将其设为 div 标签。这并没有解决错误,只会让情况变得更糟。
我在 VS Code 编辑器中没有看到错误,这是运行后显示的消息:yarn start storybook
我正在尝试使用 storybook 来测试 React 组件。
我发现这不再那么好,但我在这里看到的问题与此无关,因为它渲染代码很好。
同样,没有更改任何代码...
为什么会这样?我能做些什么来解决这个问题,为什么有一天会这样,然后第二天就不行了?
我不希望任何人回答我的所有问题,但如果有人可以提供帮助,我只想让它工作,即使我必须更改代码。
这是有问题的文件:board.jsx
* src/components/board.jsx
*/
import React from 'react'
import { Link } from 'react-router-dom'
// Import Storage object
import { Storage } from './../storage/storage'
// Import Box component
import { Box } from './board-Box'
// Import utility functions
import * as utils from '../utils/functions'
// Create Board component
export class Board extends React.Component {
constructor(props) {
super(props)
// Initialize component state
this.state = {
Boxes: Array(9).fill(null),history: [],xIsNext: true
}
}
// Create instance of Storage object
storage = new Storage()
// Handle click on Boxes on the board.
handleBoxClick(index) {
// get current state of Boxes
const Boxes = this.state.Boxes.slice()
// Get current state of history
let history = this.state.history
// Stop the game if board contains winning combination
if (utils.findWinner(Boxes) || Boxes[index]) {
return
}
// Stop the game if all Boxes are clicked (filled)
if(utils.areAllBoxesClicked(Boxes) === true) {
return
}
// Mark the Box either as 'x' or 'o'
Boxes[index] = this.state.xIsNext ? 'x' : 'o'
// Add move to game history
history.push(this.state.xIsNext ? 'x' : 'o')
// Update component state with new data
this.setState({
Boxes: Boxes,history: history,xIsNext: !this.state.xIsNext
})
}
// Handle board restart - set component state to initial state
handleBoardRestart = () => {
this.setState({
Boxes: Array(9).fill(null),xIsNext: true
})
}
render() {
// Get winner (if there is any)
const winner = utils.findWinner(this.state.Boxes)
// Are all Boxes checked?
const isFilled = utils.areAllBoxesClicked(this.state.Boxes)
// Status message
let status
if (winner) {
// If winner exists,create status message
status = `The winner is: ${winner}!`
// Push data about the game to storage
this.storage.update([`${winner} won`])
} else if(!winner && isFilled) {
// If game is drawn,create status message
status = 'Game drawn!'
// Push data about the game to storage
this.storage.update(['Game drawn'])
} else {
// If there is no winner and game is not drawn,ask the next player to make a move
status = `It is ${(this.state.xIsNext ? 'x' : 'o')}'s turn.`
}
return (
<>
{/* Link to scoreboard */}
<Link to="/" className="board-link">Return to scoreboard?</Link>
{/* The game board */}
<div className="board-wrapper">
<div className="board">
<h2 className="board-heading">{status}</h2>
<div className="board-row">
<Box value={this.state.Boxes[0]} onClick={() => this.handleBoxClick(0)} />
<Box value={this.state.Boxes[1]} onClick={() => this.handleBoxClick(1)} />
<Box value={this.state.Boxes[2]} onClick={() => this.handleBoxClick(2)} />
</div>
<div className="board-row">
<Box value={this.state.Boxes[3]} onClick={() => this.handleBoxClick(3)} />
<Box value={this.state.Boxes[4]} onClick={() => this.handleBoxClick(4)} />
<Box value={this.state.Boxes[5]} onClick={() => this.handleBoxClick(5)} />
</div>
<div className="board-row">
<Box value={this.state.Boxes[6]} onClick={() => this.handleBoxClick(6)} />
<Box value={this.state.Boxes[7]} onClick={() => this.handleBoxClick(7)} />
<Box value={this.state.Boxes[8]} onClick={() => this.handleBoxClick(8)} />
</div>
</div>
<div className="board-history">
<h2 className="board-heading">Moves:</h2>
{/* List with history of moves */}
<ul className="board-historyList">
{this.state.history.length === 0 && <span>We're waiting...</span>}
{this.state.history.length !== 0 && this.state.history.map((move,index) => {
return <li key={index}>Move {index + 1}: <strong>{move}</strong></li>
})}
</ul>
</div>
{/* Button to start new game */}
{winner && <div className="board-footer">
<button className="btn" onClick={this.handleBoardRestart}>New Game?</button>
</div>}
</div>
</>
)
}
}
解决方法
在进一步研究之后,我读到 w/create-react-app jest 测试库已经存在。所以,当我在我的 devCopy 中添加一个新库时,我搞砸了包模块。
见 (https://create-react-app.dev/docs/running-tests/)。 注意:*该功能适用于 react-scripts@0.3.0 及更高版本。 *
对我来说,这里的解决方案是删除该副本并 git checkout 一个新分支,并记住所有这些。