React Native如何实现按回车提交后才显示查询返回的温度结果

出现未提交就展示温度的问题，核心是两个逻辑缺陷：

• 温度展示区域没有做条件判断，不管用户有没有触发提交、有没有拿到有效接口返回，都会直接尝试渲染温度字段
• 状态定义和业务逻辑不匹配：data初始值设为空数组（接口实际返回对象结构）、input初始值写死为"Singapore"和注释的默认空值不一致，还存在未使用的冗余temp状态；另外请求方法里提前清空输入的写法存在闭包隐患，也没做输入非空校验。

按以下步骤调整代码即可实现「按回车提交后才展示结果」的效果：

1. 修正状态定义 #

删除冗余状态，补充查询标记状态，修正初始值：

// 原代码中定义后从未赋值的temp状态直接删除
const [input, setInput] = useState(""); // 初始为空字符串，和注释逻辑保持一致
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null); // 初始为null，语义上标记为未获取到有效天气数据
const [hasSearched, setHasSearched] = useState(false); // 新增：标记用户是否触发过有效查询提交

2. 修正数据请求方法逻辑 #

增加输入非空校验，调整清空输入的时机，正确更新查询标记：

const fetchDataHandler = useCallback(() => {
  // 输入为空/全空格时直接拦截，不发无效请求
  if (!input.trim()) return;

  setLoading(true);
  axios({
    method:'GET',
    url: `https://api.openweathermap.org/data/2.5/weather?q=${input.trim()}&units=metric&appid=${api.key}`,
  })
  .then(res =>{
    console.log(res.data);
    setData(res.data);
    setHasSearched(true); // 查询成功后标记为已完成搜索
    setInput(""); // 拿到结果后再清空输入框，避免闭包导致请求参数错误
  })
  .catch(e=>{
    console.dir(e);
    setHasSearched(false);
    setData(null);
  })
  .finally(()=> setLoading(false));

}, [api.key, input]);

3. 调整温度展示组件的渲染逻辑 #

增加条件判断，不同状态下展示对应内容，未提交时不渲染温度值：

<Text style={styles.tempText}>
  {
    loading ? "正在查询天气..." :
    hasSearched && data?.main?.temp ? `temp: ${Math.round(data.main.temp)} °C` :
    "请输入城市名称后按回车查询"
  }
</Text>

4. 输入框组件无需大改 #

原有输入框的onSubmitEditing绑定逻辑正常，保留即可：

<View>
  <TextInput 
    placeholder='Enter city name and Enter'
    onChangeText={text => setInput(text)}
    value={input}
    placeholderTextColor={'#000'}
    style={styles.textInput}
    onSubmitEditing={fetchDataHandler}
  />
</View>

• hasSearched状态是实现需求的核心，用来严格区分「用户从未提交查询」和「用户提交查询拿到结果」两个场景，从根源上避免未提交就展示温度的问题
• 输入内容加trim()处理是为了过滤首尾空格，避免用户输入全空格时发起无效请求
• 调整清空输入框的时机到请求成功后，是为了规避React状态异步更新+useCallback闭包带来的请求参数取值错误问题

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