React Native中按压TouchableOpacity/Button触发Wordnik组件渲染获取随机词

问题根源 #

当前写法下<Wordnik />只会在HomeScreen首次加载时执行一次内部的API拉取逻辑，后续点击按钮不会触发重复请求——React默认会复用已挂载的组件实例，只要实例的key、传入的props没有变化，就不会重新执行组件内部的副作用逻辑。
另外你当前代码里<TouchableOpacity>嵌套<Button>的写法不仅多余，还会引发问题：React Native的Button本身就是内置的可交互组件，外层再套触摸容器会导致触摸事件冲突，出现按钮点击无响应的情况，直接用Button自带的onPress绑定事件即可。

方案一：通过key强制重挂载组件（零修改适配现有Wordnik组件） #

这个方案完全不需要改动你已经调试通过的Wordnik内部代码，是最快落地的方式：

1. 在HomeScreen中新增一个计数状态
2. 每次点击按钮时更新这个计数
3. 把这个计数作为key属性传给Wordnik组件——React只要检测到组件的key变化，就会销毁旧的组件实例，重新挂载全新的Wordnik，自然会重新执行内部的fetch逻辑拉取新单词。

修改后的完整代码：

import { View, Button } from 'react-native';
import { useState } from 'react';
// 补充导入你独立存放的Wordnik组件，替换成你的实际文件路径
import Wordnik from './components/Wordnik';

export default function HomeScreen({ navigation }) {
  // 用于触发Wordnik重挂载的计数状态
  const [refreshKey, setRefreshKey] = useState(0);

  const onPress = () => {
    // 每次点击更新key值
    setRefreshKey(prevCount => prevCount + 1);
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Next word" onPress={onPress} />
      {/* 绑定动态key，key变化时组件会重新执行内部逻辑 */}
      <Wordnik key={refreshKey} />
    </View>
  );
}

注意点：重挂载过程中Wordnik内部的加载状态会从头走一遍，刚好匹配"点击按钮获取新单词"的交互预期。

方案二：通过prop传递触发信号（无组件销毁，性能更优） #

如果不想每次点击都销毁重建组件实例，可以小幅修改Wordnik组件的内部逻辑，让它响应外部传入的触发信号重新拉取数据：

1. HomeScreen部分的逻辑和方案一一致，只是不再给Wordnik传key，而是把计数状态作为自定义prop传入
2. 修改Wordnik的useEffect依赖，当传入的触发prop变化时，重新执行fetch逻辑

HomeScreen中Wordnik的调用修改为：

{/* 不再传key，改为传触发prop */}
<Wordnik refreshTrigger={refreshKey} />

对应修改Wordnik组件的内部逻辑（基于你已经跑通的原有代码调整）：

// 原有Wordnik组件的基础修改
export default function Wordnik({ refreshTrigger = 0 }) {
  const [word, setWord] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchRandomWord = async () => {
      setIsLoading(true);
      try {
        // 这里保留你原来写好的fetch调用逻辑
        const response = await fetch('你原有Wordnik API的请求地址');
        const result = await response.json();
        setWord(result.word);
      } catch (err) {
        setWord('请求出错，请重试');
      } finally {
        setIsLoading(false);
      }
    };

    fetchRandomWord();
  // 把外部传入的refreshTrigger加入依赖数组，值变化时就重新执行拉取
  }, [refreshTrigger]);

  return (
    <Text>{isLoading ? '加载中...' : word}</Text>
  )
}

优势：不会反复销毁重建组件，性能更好，还可以统一处理加载状态、错误提示，避免组件重挂载时的闪烁问题。

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