React Native TextInput 在第二次按下时发送输入

Question

伙计们，我是 React Native 的新手，也不擅长 JavaScript。在我的应用程序中，我有 2 个 TextInput 和一个 Pressable 按钮，但输出没有意义。我尝试更改某些行的执行时间，但结果是一样的。

我正在使用：博览会, 反应本机 0.68.2， android api 30（Android 工作室）

输出：

Android 捆绑完成 32ms

第一次点击

日志描述：

登录身份：

第二次点击

日志描述：sadasdas

LOG身份：12345678910

Report.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 是否具有最后一个值。

Learn more about useState.

Answer 2

首先，只提供解决您的问题所需的代码。关于问题：它正在发生，因为您 re-render 组件具有 setDescription、setIdentity、setEnteredText 和 setEnteredId 在 buttonHandler() 中。并且描述的值不是立即设置的。作为解决方法，您可以执行以下操作：

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 应该触发两次，因为描述和身份都在依赖项数组中，但这是管理 useState 的异步行为的良好开端。

React Native TextInput 在第二次按下时发送输入

React Native TextInput sends input on second press

javascript

android

react-native