将类组件重构成函数组件

const EventDetail = (props) => {
  // export default  class EventDetail extneds React.Component{
  const navigation = useNavigation();
  // static contextType = NavigationContext;
  // 点击返回事件列表页
  const goPage = () => {
    navigation.navigate("Home");
  };
  // goPage = () => {
  //   // 上边实现效果this.context===this.props.navigation
  //   this.context.navigate("Home");
  // };

  const [eventData, setEventData] = useState({});
  // state = {
  //   eventData: {},
  // };

  useEffect(() => {
    // 立即执行
    getEventDetail();
  }, []);
  // componentDidMount() {
  //   this.getEventDetail();
  // }
  const getEventDetail = async () => {
    const url = EVENT_DETAIL.replace(":id", props.route.params.id);
    // const url = EVENT_DETAIL.replace(":id", this.props.route.params.id);
    const res = await request.privateGet(url);
    setEventData(res.data.event);
    // this.setState({ eventData: res.data.event });
  };
  // render() {
  const {
    id,
    name,
    begin_time,
    end_time,
    description,
    creator,
    create_time,
    channel,
    images,
    location,
    location_detail,
    goings_count,
    likes_count,
    me_likes,
    me_going,
  } = eventData;
  // } = this.state.eventData;
  return (
    <SafeAreaView>
      <View>
        {/* 导航栏 */}
        <View
          style={{
            width: "100%",
            height: 130,
            backgroundColor: "#8560A9",
            justifyContent: "space-between",
            flexDirection: "row",
            paddingLeft: pxToDp(10),
            paddingRight: pxToDp(10),
          }}
        >
          <EventDetailNav />
        </View>
      </View>

      <Introduction
        channel={channel}
        name={name}
        creator={creator}
        create_time={create_time}
      />
    </SafeAreaView>
  );
};

export default EventDetail;
上一篇:使用useEffect 构建加载进度条与报错信息


下一篇:运维监控系列(19)-Prometheus时序数据及PromQL基础入门