React Native点击按钮后获取TextInput值的问题求助

问题根源 #

1. 状态更新时机错误：你仅通过onSubmitEditing设置recipientEmail，这个回调仅在用户点击键盘的「提交」按钮时触发，直接点击TouchableHighlight的Submit按钮不会触发该事件，导致recipientEmail始终是初始空值。
2. 异步状态更新的误区：setMatchingUsers是异步更新操作，调用后立刻console.log(matchingUsers)打印的是更新前的旧值。

解决方法 #

方案1：实时同步输入值（推荐）

改用onChangeText回调，输入内容变化时实时更新状态，确保点击按钮时能拿到最新输入值：

export default function TabOneScreen() {
  const [recipientEmail, setRecipientEmail] = useState("");
  const [matchingUsers, setMatchingUsers] = useState([]); // 补充定义缺失的状态

  async function getUserList() {
    if (!recipientEmail) return; // 空值时直接返回，避免无效请求

    const headers = { 
      headers: { 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/json",
          "Cache-Control": "no-cache",
          "Host": subdomain + ".conveyor.cloud"
      }
    };

    const response = await axios.get(`https://${subdomain}.conveyor.cloud/Home/GetUserData/?q=${recipientEmail}`, headers);

    setMatchingUsers(response.data);
    // 直接打印接口返回值查看结果，状态更新后的值需通过useEffect监听
    console.log(response.data);
    return response.data; 
  }

  return (
    <>
      <TextInput 
        placeholder='Enter Recipient Email or Name' 
        onChangeText={(text) => setRecipientEmail(text)}
      />
      <TouchableHighlight onPress={getUserList}>
        <Text>Submit</Text>
      </TouchableHighlight>
    </>
  );
}

方案2：通过Ref手动获取输入值（保留提交时更新逻辑）

如果希望仅在提交动作时更新状态，可以给TextInput添加ref，点击按钮时直接读取输入框的当前值：

import { useRef } from 'react'; // 引入useRef

export default function TabOneScreen() {
  const [recipientEmail, setRecipientEmail] = useState("");
  const [matchingUsers, setMatchingUsers] = useState([]);
  const inputRef = useRef(null); // 创建输入框引用

  async function getUserList() {
    const inputValue = inputRef.current?.value;
    if (!inputValue) return;

    setRecipientEmail(inputValue); // 可选：将值同步到状态中

    const headers = { 
      headers: { 
          "Accept" : "*/*",
          "Connection": "keep-alive",
          "Accept-Encoding": "gzip, deflate, br",
          "Content-Type": "application/json",
          "Cache-Control": "no-cache",
          "Host": subdomain + ".conveyor.cloud"
      }
    };

    const response = await axios.get(`https://${subdomain}.conveyor.cloud/Home/GetUserData/?q=${inputValue}`, headers);

    setMatchingUsers(response.data);
    console.log(response.data);
    return response.data; 
  }

  return (
    <>
      <TextInput 
        ref={inputRef}
        placeholder='Enter Recipient Email or Name' 
        onSubmitEditing={(e) => setRecipientEmail(e.nativeEvent.text)}
      />
      <TouchableHighlight onPress={getUserList}>
        <Text>Submit</Text>
      </TouchableHighlight>
    </>
  );
}

补充：异步状态更新的正确监听 #

要查看matchingUsers更新后的最新值，需使用useEffect监听状态变化：

import { useEffect } from 'react'; // 引入useEffect

// 在组件内添加以下代码
useEffect(() => {
  console.log("Updated matchingUsers:", matchingUsers);
}, [matchingUsers]); // 当matchingUsers状态变化时触发回调

内容的提问来源于stack exchange，提问作者xccelerated99