React Native TextInput 在第二次按下時發送輸入

Question

伙計們，我是 React Native 的新手，也不擅長 JavaScript。 在我的應用程序中，我有 2 個 TextInput 和一個 Pressable 按鈕，但輸出沒有意義。 我試圖改變一些行的執行時間，但結果是一樣的。

我正在使用：expo，react native 0.68.2，android api 30（Android Studio）

輸出：

Android 捆綁完成 32ms

第一次點擊

日志說明：

日志標識：

第二次點擊

日志描述：sadasdas

登錄身份：12345678910

---

報告.js

export default function Report({ route, navigation }) {
  const [enteredText, setEnteredText] = useState("");
  const [enteredId, setEnteredId] = useState("");

  const [description, setDescription] = useState("");
  const [identity, setIdentity] = useState("");

  function descriptionInputHandler(enteredText) {
    setEnteredText(enteredText);
    //console.log("entered text :" + enteredText);
  }

  function identityInputHandler(enteredId) {
    setEnteredId(enteredId);
    //console.log("entered id :" + enteredId);
  }

  function buttonHandler() {
    setDescription(enteredText);
    setIdentity(enteredId);
    setEnteredText("");
    setEnteredId("");
    console.log("description :" + description);
    console.log("identity :" + identity);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{category}</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.longTextInput}
          placeholder="Describe your situation, don't worry we are here."
          onChangeText={descriptionInputHandler}
          value={enteredText}
        />
        <TextInput
          style={styles.textInput}
          placeholder="What is your identity number."
          onChangeText={identityInputHandler}
          value={enteredId}
        />
        <Pressable style={styles.button} onPress={buttonHandler}>
          <Text style={styles.text}>Send report!</Text>
        </Pressable>
      </View>
    </View>
  );
}

Answer 1

不能保證改變狀態是同步的（而且大多數情況下不是）。 因此，在使用setDescription之后，您不能確定description將具有最后一個值。

了解有關 useState的更多信息。

Answer 2

首先，只提供解決問題所需的代碼。 關於問題：它正在發生，因為您在buttonHandler()中使用setDescription 、 setIdentity 、 setEnteredText和setEnteredId重新渲染組件。 並且描述的值不會立即設置。 作為一種解決方法，您可以執行以下操作：

function buttonHandler() {
    console.log("description :" + enteredText);
    console.log("identity :" + enteredId);

    setEnteredText("");
    setEnteredId("");
}

無需使用更多變量。

Answer 3

嘗試類似的方法：

     function buttonHandler() {
    setDescription(enteredText);
    setIdentity(enteredId);
  }

 useEffect(() => {
    console.log("description :" + description);
    console.log("identity :" + identity);
    setEnteredText("");
    setEnteredId("");
    }, [description, identity]);

useEffect 應該被觸發兩次，因為 description 和 identity 都在依賴數組中，但它是管理 useState 的異步行為的一個好的開始。