ERROR in ./src/index.js /Users/xxx/jyanken/src/index.js 45:54 error 'ix' is defined but never used no-unused-vars 45:74 error 'idx' is not defined no-undef 63:12 error 'propTypes' is not defined no-undef ✖ 3 problems (3 errors, 0 warnings) @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js ERROR in ./src/index.js Module not found: Error: Can't resolve './Jyanken' in '/Users/xxx/jyanken/src' @ ./src/index.js 35:15-35 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js webpack: Failed to compile.
とエラーが出ました。index.jsには
import React,{Component} from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' import RaisedButton from 'material-ui/RaisedButton' import Paper from 'material-ui/Paper' import './index.css' import {Tabs,Tab} from 'material-ui/Tabs' import {Table,TableBody,TableHeader,TableHeaderColumn,TableRow,TableRowColumn} from 'material-ui/Table'; import Jyanken from './Jyanken' class JyankeGamePage extends Component { constructor(props){ super(props) this.jyanken = new Jyanken() this.state = {scores:[],status:{},tabIndex:0} } componentDidMount(){ this.getResult() } getResult(){ this.setState({scores:this.jyanken.getScores()}) this.setState({status:this.jyanken.getStatuses()}) } pon(te){ this.jyanken.pon(te) this.getResult() } render(){ return( <MuiThemeProvider> <div style={{marginLeft:30}}> <Header>じゃんけんポン!</Header> <JyankenBox actionPon={(te) => this.pon(te)} /> <Paper style={{width:400}} zDepth={2}> <Tabs value={this.state.tabIndex} onChange={(ix)=>this.tabChange(idx)}> <Tab label="対戦結果" value={0}> <ScoreList scores={this.state.scores} /> </Tab> <Tab label="対戦成績" value={1}> <StatusBox status={this.state.status} /> </Tab> </Tabs> </Paper> </div> </MuiThemeProvider> ) } } const Header =(props) =>(<h1>{props.children}</h1>) Header.propTypes ={ children:propTypes.string } const StatusBox =(props) =>{ <Table> <TableBody displayRowCheckbox={false}> <TableRow displayBorder={false}> <TableHeaderColumn>勝ち</TableHeaderColumn><TableRowColumn style={judgmentStyle(1)}>{props.status.win}</TableRowColumn> </TableRow> <TableRow displayBorder={false}> <TableHeaderColumn>負け</TableHeaderColumn><TableRowColumn style={judgmentStyle(2)}>{props.status.lose}</TableRowColumn> </TableRow> <TableRow displayBorder={false}> <TableHeaderColumn>引き分け</TableHeaderColumn><TableRowColumn style={judgmentStyle(0)}>{props.status.draw}</TableRowColumn> </TableRow> </TableBody> </Table> } StatusBox.propTypes = { status:PropTypes.object } const JyankenBox = (props) =>{ const style = {marginLeft:20} return( <div style={{marginTop:40,marginBottom:30,marginLeft:30}}> <RaisedButton label="グー" onClick={() => props.actionPon(0)} style={style} /> <RaisedButton label="チョキ" onClick={() => props.actionPon(1)} style={style} /> <RaisedButton label="パー" onClick={() => props.actionPon(2)} style={style} /> </div> ) } JyankenBox.propTypes ={ actionPon:PropTypes.func } const ScoreList = (props) =>( <Table> <TableHeader adjustForCheckbox={false} displaySelectAll={false} > <TableRow> <TableRowColumn>時間</TableRowColumn><TableRowColumn>人間</TableRowColumn><TableRowColumn>コンピュータ</TableRowColumn><TableRowColumn>結果</TableRowColumn> </TableRow> </TableHeader> <TableBody> {props.scores.map((score,ix) =><ScoreListItem key={ix} score={score} />)} </TableBody> </Table> ) ScoreList.propTypes ={ scores:PropTypes.array } const ScoreListItem = (props) =>{ const teString = ["グー","チョキ","パー"] const judgmentString = ["引き分け","勝ち","負け"] const dateHHMMSS = (d) => d.toTimeString().substr(0,8) return( <TableRow style={judgmentStyle(props.score.judgment)}> <TableRowColumn>{dateHHMMSS[props.score.created_at]}</TableRowColumn> <TableRowColumn>{teString[props.score.human]}</TableRowColumn> <TableRowColumn>{teString[props.score.computer]}</TableRowColumn> <TableRowColumn>{judgmentString[props.score.judgment]}</TableRowColumn> </TableRow> ) } ScoreListItem.propTypes ={ score:PropTypes.object } const judgmentStyle = (judgment) =>({color:["#000","#2979FF","#FF1744"][judgment]}) ReactDOM.render( <JyankeGamePage />, document.getElementById('root') )
と書きました。propTypesは
import PropTypes from 'prop-types'
で定義しているはずなので、なぜエラーが出るのかわかりません。3つのエラーは何が問題でどう直せばいいのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。