有什么办法可以停止多次调用一个函数？答案

【问题标题】：Is there any way to stop calling a function multiple times?有什么办法可以停止多次调用一个函数？
【发布时间】：2020-08-27 11:46:34
【问题描述】：

您好，我是 react native 的新手，一直在尝试使用 react native 制作一个刽子手应用程序。我要做的是创建一个状态，在该状态下我保存随机单词并在下面有 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>
     );
   };

【问题讨论】：

所以我假设你想在给出整个文本后调用 setCorrectLetters 函数？不是一个字一个字吗？
@AkilaDevinda 是的，这就是我想要的。你能提供一些建议吗？
我用 react 而不是 react-native 重构了你的代码，以便包含一个有效的 sn-p。 codesandbox.io/s/hungry-mcnulty-m7bfk?file=/src/App.js这就是你想要的吗？
@AntoineRaoulIscaros 谢谢！我喜欢你的解决方案。但还有一件事。当我在我的 android 设备上运行它时，它显示“未定义不是对象（评估 'correctLetters,includes'）”错误。你知道为什么吗？
好的，我将它作为解决方案发布在 react-native 中，我相信您忘记将 onChange 更改为 onChangeText 事件对象。

标签： javascript android function react-native

【解决方案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>
  );
};

【讨论】：

谢谢，现在我知道 OnChange 和 e.target.value 不适用于 react native。