在 Nextjs 中使用 useEffect 和 useState

Question

我试图了解 useState 和 useEffect ，但我想我还没来得及走路就开始跑步了。

我有一系列单词：

const words = ["There", "Their", "They're", "Were"];

我想显示数组中的第一个单词，当我单击“下一个单词”时，它将更改为下一个单词，单击“上一个单词”，它将 go 变为上一个单词。

使用 useState 够简单吧？

这是我的代码：

import { useState, useEffect } from 'react';

const Array = () => {

  const words = ["There", "Their", "They're", "Were"];
  const [count, setCount] = useState(0);
  const [word, setWord] = useState(words[0]);
  return (
    <div>
      <button onClick={prevWord}>Prev Word</button>
      <span>{words[count]} </span>
      <button onClick={nextWord}>Next Word</button>
    </div>
  );
}
  
export default Array;

首要问题：

当我单击“下一个单词”或“上一个单词”时，它会单击数组，不幸的是它会继续运行。 如果用户单击“下一个单词”例如 15 次，他必须单击“上一个单词”12 次才能再次看到一个单词，我不喜欢这一点。 解决办法是什么？

我的第二个问题

然后我想更进一步。 当我单击下一个字母时，我希望它显示第一个字母，每次单击下一步时，它都会添加下一个字母。

我目前在控制台中显示了字母，但我不知道如何显示我想要的？

这是我拥有的所有内容的完整代码：

import { useState, useEffect } from 'react';

const Array = () => {

  const words = ["There", "Their", "They're", "Were"];
  const [count, setCount] = useState(0);
  const [countLetter, setCountLetter] = useState(0);
  const [word, setWord] = useState(words[0]);
  const [letter, setLetter] = useState(word[0]);

  const nextWord = (() => {
    setCount(prevCount => prevCount + 1)
    console.log(words[count]);
  })
  const prevWord = (() => {
    setCount(prevCount => prevCount - 1)
    console.log(words[count]);
  })
  const nextLetter = (() => {
    setCountLetter(prevcountLetter => prevcountLetter + 1)
    console.log(word[countLetter]);
  })
  const prevLetter = (() => {
    setCountLetter(prevcountLetter => prevcountLetter - 1)
    console.log(word[countLetter]);
  })


  // console.log(word[count]); // spells the word
  // console.log(word[count]); // spells the word
  return (
    <div>
      <button onClick={prevLetter}>Prev Letter</button>
      <button onClick={prevWord}>Prev Word</button>
      <span>{words[count]} </span>
      <button onClick={nextWord}>Next Word</button>
      <button onClick={nextLetter}>Next Letter</button>
    </div>
  );
}

export default Array;

任何帮助表示赞赏。

Answer 1

1. nextWord / prevWord 没有按预期工作，因为您没有检查数组的边界。 在调用 setCount 之前检查counts是否在 0 和words.length范围内。

  const nextWord = (() => {
    if (count < words.length) {
      setCount(prevCount => prevCount + 1);
      console.log(words[count]);
    }
  })

  const prevWord = (() => {
    if (count > 0) {
      setCount(prevCount => prevCount - 1)
      console.log(words[count]);
    }
  })

2. 每次调用 nextWord / prevWord 时都应该重置letter 。 或者至少检查新单词的长度是否相等或更大，以避免超出单词的边界。 在调用setCountLetter之前还要检查当前的单词边界。

  const nextWord = (() => {
    if (count < words.length) {
      setCount(prevCount => prevCount + 1);
      setCountLetter(0);
      console.log(words[count]);
    }
  })

  const prevWord = (() => {
    if (count > 0) {
      setCount(prevCount => prevCount - 1);
      setCountLetter(0);
      console.log(words[count]);
    }
  })

  const nextLetter = (() => {
    if (letter < words[count].length) {
      setCountLetter(prevcountLetter => prevcountLetter + 1)
      console.log(word[countLetter]);
    }
  })
  const prevLetter = (() => {
    if (letter > 0) {
      setCountLetter(prevcountLetter => prevcountLetter - 1)
      console.log(word[countLetter]);
    }
  })

Answer 2

我尝试了许多解决方案，但过了一段时间我意识到我们只需重置本地服务器即可。