Question

我试图使用useState作为Game State运行一个网页，并在使用React渲染的网站上设置游戏状态。使用三个未定义的变量进行编译时会出现问题。（Set_GAME_State，SNIPPETS和代码段索引）。

这是基于Daniel Katz关于最新版本的react中使用Hooks（useEffect和Use State）的教程的：[Link]（https://medium.com/@dtkatz/react-hooks-tutorial-learn-by-building-b90ec4db2b8e）

我试图命名常量并在钩子之前设置变量，但无济于事。

import React, { useState, useEffect } from 'react';

const [snippet, setSnippet]= useState('');
const [userText, setUserText] = useState('');
const [gameState, setGameState] = useState(INITIAL_Game_State);

setSnippet(SNIPPETS[snippetIndex]);
setGameState({...gameState, startTime: new Date().getTime() });

useEffect (() => {
  if (gameState.victory) document.title = 'Victory!';
});
....
  const chooseSnippet = snippetIndex => () => {
    console.log('setSnippet', snippetIndex);
    setSnippet(SNIPPETS[snippetIndex]);
  }; 
  const updateUserText = event => {
      setUserText (event.target.value);

    if (event.target.value === snippet) {
      setGameState({
      ...gameState,
      victory: true,
      endTime: new Date().getTime() -gameState.startTime
      });
    }
      console.log('current userText', userText);
    }

  return (
    <div>
      <h2> Type Race</h2>
      <hr />
      <h3> Snippet </h3>
      {snippet}
      <h4> {gameState.victory ? `Done!  Time: ${gameState.endTime}ms` : null}</h4>
     <input value={userText} onChange={updateUserText} />
     <hr />
     {
       SNIPPETS.map((SNIPPET, index) => (
         <button onClick={chooseSnippet(index)} key={index}>
         {SNIPPET.substring(0,10)}...
         </button>
       ))
     }
    </div>
  )
}

export default App;

这是App Css文件

css
.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这是初始游戏状态javascript文件。

const INITIAL_GAME_STATE = { victory: false, startTime: null, endTime: null};
const [snippet, setSnippet]= useState('');
const [userText, setUserText] = useState('');
const [gameState, setGameState] = useState(INITIAL_GAME_STATE);

setSnippet(SNIPPETS[snippetIndex]);
setGameState({...gameState, startTime: new Date().getTime() });

显示的错误： ./src/App.js 第5行：未定义“ INITIAL_Game_State” no-undef 第7行：“ SNIPPETS”未定义为no-undef 第7行：“ snippetIndex”未定义为no-undef

它应该显示带有游戏状态和用JavaScript代码编写的其他文本的网站。

Answer 1

在链接的文章中，在挂钩之前都定义了SNIPPETS和INTIIAL_Game_State。

摘自文章：

const INITIAL_GAME_STATE = { victory: false, startTime: null, endTime: null };
const [snippet, setSnippet] = useState('');
const [userText, setUserText] = useState('');
const [gameState, setGameState] = useState(INITIAL_GAME_STATE);

以及摘要：

const SNIPPETS = [
  'Bears, beets, battlestar galactica',
  "What's Forrest Gump's password? 1Forrest1",
  'Where do programmers like to hangout? The Foo Bar'
];
const [snippet, setSnippet] = useState('');
const [userText, setUserText] = useState('');

应该只是在使用它们之前包含这些声明。您的示例中似乎已将其删除。只需在使用钩子的位置上都包括两个，就应该设置好了。

他的完整app.js here

在React

1 个答案: