javascript - 有没有办法停止多次调用一个函数？

Question

大家好，我是 React Native 的新手，一直在尝试使用 React Native 制作刽子手应用程序。 我想要做的是创建一个状态，在该状态下我保存随机单词并在下面有 textInput，以便该状态可以比较您在 textInput 中键入的内容并显示匹配的字母。否则它只会显示“_”。但问题是每次我在 textInput 中键入一个字母时，都会随机选择单词。我想保留一个单词，直到我完成单词的每个拼写。它看起来像一个函数每当我输入一个字母时，我都会调用 make，但我的编程技能还不够好，无法找出问题并解决问题。我尝试移动“selectedWord”和一些谷歌搜索，但没有成功。我正在附加我的代码如下。希望有人能给我一些建议!

const Words = () => { 
   const words = ['app', 'program', 'interface'];
   const [correctLetters, setCorrectLetters] = useState([]);
   let selectedWord = words[Math.floor(Math.random() * words.length)];
   function displayWord() {
      return (
        <Text>
         {selectedWord
           .split("")
           .map(letter => {
             if(letter === " ") {
               return letter;
             } else {
               return correctLetters.includes(letter) ? letter : " _ ";
             }
           })
           .join("")}
         </Text>
       );
     }
     return (
      <View>
        <Text>{displayWord()}</Text>
        <TextInput
          value={correctLetters}
          onChangeText={(e) => setCorrectLetters(e)}
        ></TextInput>
      </View>
     );
   };

Answer 1

你可以重构你的代码如下

const displayWord = ({ selectedWord, correctLetters }) => {
  return (
    <Text>
      {selectedWord
        .split("")
        .map((letter) => {
          if (letter === " ") {
            return letter;
          } else {
            console.log(correctLetters);
            return correctLetters.includes(letter) ? letter : " _ ";
          }
        })
        .join("")}
    </Text>
  );
};
const DisplayWord = React.memo(displayWord);

const words = ["app", "program", "interface"];

const Words = () => {
  const [correctLetters, setCorrectLetters] = useState([]);
  const [selectedWord, setSelectedWord] = useState("");
  useEffect(() => {
    setSelectedWord(words[Math.floor(Math.random() * words.length)]);
  }, []);
  return (
    <View>
      <DisplayWord
        selectedWord={selectedWord}
        correctLetters={correctLetters}
      />
      <TextInput
        value={correctLetters}
        onChangeText={(e) => setCorrectLetters(e)}
      />
    </View>
  );
};