从反应类到钩子变化

Question

我是新的 React 开发人员，因为每个人都说 React 钩子最好从而不是类开始，我从钩子开始，在这里我试图将类更改为钩子，类版本完全可用，我只是想要把它改成钩子并从中学习，所以在这里我改变了 take class，它的 state 和 setState 和 put useState 但仍然得到错误：'TypeError: Object(...) is not a function''> 6 | function EventsSection() {'

类版本：

import React, { Component } from "react";

import { EventsTable } from "../EventsTable";
import { TitleSearch } from "../TitleSearch";

const eventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete",
  },
  {
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress",
  },
];

class EventsSection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      eventsData,
    };
  }

  handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      return this.setState({
        eventsData,
      });
    }

    this.setState({});
  };

  handleSearch = (searchText) => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents,
    });
  };

  render() {
    return (
      <section>
        <header>
          <TitleSearch onSearch={this.handleSearch} />
        </header>
        <EventsTable eventsData={this.state.eventsData} />
      </section>
    );
  }
}

export { EventsSection };

钩子：

import React, { useState } from "react";

import styles from "./style.module.css";
import { EventsTable } from "../EventsTable";
import { TitleSearch } from "../TitleSearch";

function EventsSection() {
  const [eventsData, setEventsData] = useState([
    {
      key: 1,
      title: "Bulletproof EP1",
      fileType: "Atmos",
      process: "match media",
      performedBy: "Denise Etridge",
      operationNote: "-",
      updatedAt: "26/09/2018 17:21",
      status: "complete",
    },
    {
      key: 2,
      title: "Dexter EP2",
      fileType: "Video",
      process: "Compliance",
      performedBy: "Dane Gill",
      operationNote: "passed",
      updatedAt: "21/09/2018 12:21",
      status: "inProgress",
    },
  ]);

  const handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      return setEventsData();
    }

    setEventsData({});
  };

  const handleSearch = (searchText) => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    setEventsData(filteredEvents);
  };

  return (
    <section>
      <header>
        <h1>Events</h1>

        <TitleSearch onSearch={handleSearch} className={styles.action} />
      </header>
      <EventsTable eventsData={eventsData} />
    </section>
  );
}

export { EventsSection };

Answer 1

import React from "react";

import { EventsTable } from "../EventsTable";
import { TitleSearch } from "../TitleSearch";

const defaultEventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete",
  },
  {
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress",
  },
]

function EventsSection () {
  const [eventsData, setEventsData] = React.useState(defaultEventsData)

  const handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      setEventsData(defaultEventsData)
    }
  }

  const handleSearch = (searchText) => {
    const filteredEvents = defaultEventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    setEventsData(filteredEvents)
  }

  return (
    <section>
      <header>
        <TitleSearch onSearch={handleSearch} />
      </header>
      <EventsTable eventsData={eventsData} />
    </section>
  )
}

export { EventsSection };

这必须与您导入组件的方式有关。在您的类组件上，您导出为 export { EventsSection };。但是，在您的功能组件中，您导出为 export default EventsSection;。

因此，要么您更改导入组件的方式，要么更改导出功能组件的方式。