React Native传递state hooks为props时报setActiveTab不是函数错误如何解决

你在向HeaderButton组件传递setActiveTab属性时，误将状态值activeTab（字符串类型）传入，而非useState返回的状态更新函数setActiveTab，因此调用props.setActiveTab时会抛出「不是函数」的报错。

将Header组件中两个HeaderButton标签的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"
        activeTab={activeTab}
        setActiveTab={setActiveTab}
      />
      <HeaderButton
        text="Pick up"
        activeTab={activeTab}
        setActiveTab={setActiveTab}
      />
    </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.activeTab === props.text ? "white" : "black" }}>  {props.text}</Text>
  </TouchableOpacity>
);

• 原有代码里传递的bgColor、textColor属性实际没有被用到，样式已经通过activeTab判断动态生成，可以直接删除冗余传参，避免后续出现样式不生效的问题。

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