javascript - props.setActiveTab 不是函数钩子(Hook)

Question

我将状态钩子(Hook)作为 Prop 传递给我的组件，并且我的 HeaderButton 工作得很好，但是当我尝试实现 onPress 时，我收到一条错误消息“props.setActiveTab 不是函数”

import React from "react";
import { useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";

export default function Header(props) {
  const [activeTab, setActiveTab] = useState("Delivery");
  return (
    <View style={{ flexDirection: "row", alignSelf: "center"}}>
      <HeaderButton
        text="Delivery"
        bgColor="black"
        textColor="white"
        activeTab={activeTab}
        setActiveTab={activeTab}
      />
      <HeaderButton
        text="Pick up"
        bgColor="white"
        textColor="black"
        activeTab={activeTab}
        setActiveTab={activeTab}
      />
    </View>
  );
}

const HeaderButton = (props) => (
  
  <TouchableOpacity
    style={{
      backgroundColor: props.activeTab === props.text ? "black" : "white",
      paddingVertical: 10,
      paddingHorizontal: 40,
      borderRadius: 10,
    }}

    onPress={() => props.setActiveTab(props.text)}
  >
    <Text style={{ color: props.textColor }}>  {props.text}</Text>
  </TouchableOpacity>
);

Answer 1

因为您没有在此处传递函数:

setActiveTab={activeTab}

更改为:

setActiveTab={setActiveTab}