Question

我正在尝试将以下类组件转换为函数组件。

我已经取得了很好的进展（我相信），但是我遇到了将类组件中使用的 setState 的各种引用转换为函数组件中使用的 useState 的问题。

需要转换的类组件：

import React from "react";
import { EmptyState, Layout, Page } from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge-react";

class MyComponent extends React.Component {
  state = { open: false };
  render() {
    return (
      <Page>
        <ResourcePicker
          resourceType="Product"
          showVariants={false}
          open={this.state.open}
          onSelection={(resources) => this.handleSelection(resources)}
          onCancel={() => this.setState({ open: false })}
        />
        <Layout>
          <EmptyState
            heading="Discount your products temporarily"
            action={{
              content: "Select products",
              onAction: () => this.setState({ open: true }),
            }}
          >
          </EmptyState>
        </Layout>
      </Page>
    );
  }
  handleSelection = (resources) => {
    console.log(resources);
  };
}

export default MyComponent;

函数组件代码（到目前为止）：

import React, { useState, useCallback } from "react";
import { EmptyState, Layout, Page } from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge-react";

function MyComponent(props) {
  const [resourcePicker, setResourcePicker] = useState({ open: false });
  const handleToggleResourcePicker = useCallback(
    () => setResourcePicker((active) => !active),
    []
  );

  return (
    <Page>
      <ResourcePicker
        resourceType="Product"
        showVariants={false}
        open={setResourcePicker}
        onSelection={(resources) => handleSelection(resources)}
        onCancel={() => setResourcePicker}
      />
      <Layout>
        <EmptyState
          heading="Discount your products temporarily"
          action={{
            content: "Select products",
            onAction: () => setResourcePicker,
          }}
        ></EmptyState>
      </Layout>
    </Page>
  );
}

const handleSelection = (resources) => {
  console.log(resources);
};

export default MyComponent;

有人能帮我找到正确的方向吗？谢谢！

Answer 1

你把事情复杂化了。除非需要，否则您不需要将对象放入 useState 中。 useCallback 如果您的函数更改过多并执行昂贵的计算，则很有用，在您的情况下，这不是必需的。

const [resourcePicker, setResourcePicker] = useState({ open: false });
  const handleToggleResourcePicker = useCallback(
    () => setResourcePicker((active) => !active),
    []
  );

可以改成

const [resourcePicker, setResourcePicker] = useState(false);
const handleToggleResourcePicker = () => {
  setResourcePicker(active => !active)
}

休息我建议你阅读React Docs

Answer 2

问题是这一行：

onAction: () => setResourcePicker,

函数没有被调用，需要传入一个值。为了匹配类版本的功能，应该是：

onAction: () => setResourcePicker({ open: true }),

如何将此类组件转换为功能组件？

2 个答案: