为什么 header 按钮 onPress 的行为与常规按钮 onPress 不同？

Question

我有一个名为 sendResults() 的方法，它进行 API 调用并进行一些数组操作。当我使用“普通”TouchableOpacity 按钮调用该方法时，一切正常。但是，当我使用放置在 App Stack header 中的按钮调用它时，该方法无法正确运行。感觉像是一个异步问题（？）但不确定...

这是两个按钮的代码。

    <TouchableOpacity
      onPress={() => {
        sendResults(); // works fine
      }}
      style={styles.buttonStyle}
    >
      <Text>Save</Text>
    </TouchableOpacity>

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          onPress={() => {
            sendResults(); // doesn't work
          }}
          style={styles.buttonStyle}
        >
          <Text>Save</Text>
        </TouchableOpacity>
      ),
    });
  }, []);

编辑：sendResults() 代码

  // Shows alert confirming user wants to send results to API
  const sendResults = () => {
    Alert.alert("Save Results", "Alert", [
      {
        text: "Save & Quit",
        onPress: () => postNumsAndNavigate(),
        style: "destructive",
      },
      { text: "Cancel", onPress: () => console.log("") },
    ]);
  };

  // Save Results button
  const postNumsAndNavigate = async () => {
    if (bibNums.length == 0) {
      alert("You have not recorded any results. Please try again.");
    } else if (bibNums.filter((entry) => entry == "").length > 0) {
      alert("Blank");
    } else {
      console.log("\n" + bibNums);
      await postNums();
      AsyncStorage.setItem(`done`, "true");
      navigation.navigate("Home Screen");
    }
  };

postNums() 调用 API。

编辑 2：bibNums 声明

const [bibNums, setBibNums] = useState([]);

Answer 1

您只设置了一次导航按钮的处理程序，因为您的 useEffect 没有任何依赖；它仅在安装组件时运行，它捕获 sendResults 的旧引用。 sendResults 每次 postNumsAndNavigate 和 bibNums 变化时都会变化。将 sendResults 添加到依赖项数组以在每次 sendResults 更改时更新导航按钮处理程序。

useEffect(() => {
...
}, [sendResults])

它对 TouchableOpacity 正常工作，因为您在每个渲染器上都分配了处理程序。

onPress={() => {sendResults()}}

为什么 header 按钮 onPress 的行为与常规按钮 onPress 不同？

Why does header button onPress act differently than regular button onPress?

react-native

asynchronous

onpress