有没有办法停止多次调用函数？

如何解决有没有办法停止多次调用函数？

嗨，我是React Native的新手，并一直在尝试使用react native制作一个hangman应用。 我想做的是使一个状态，在该状态下我保存随机单词，并在下面放置textInput，以便该状态可以比较您在textInput中键入的内容并显示匹配的字母。否则，它只会显示'_'。但是问题是每次我在textInput中输入字母时，都会挑选出随机单词。我想保留一个单词，直到我完成单词的所有拼写为止。这似乎是一个函数每当输入字母时，我都会打电话给我，但是我的编程技能还不足以解决问题并加以解决。我尝试过移动“ 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>
     );
   };

解决方法

您可以按以下方式重构代码

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>
  );
};