资源选择器不会显示

Question

我一辈子都无法打开 ResourcePicker。按下按钮时，我可以看到状态从 false 更改为 true，但资源选择器实际上并没有打开。

<AppProvider apiKey={apiKey} shopOrigin={shopOrigin} >
        <Page>
          <TopBar pageTitle="Create Sale" primaryButton="Save" clickPrimaryButton={this.handleClick} />
          <Layout sectioned={true}>
            <Layout.AnnotatedSection title="Scheduled sale settings" description="Setup the discount and which products will be selected for the sale.">
              <Card sectioned>
                <FormLayout>
                  <TextField label="Sale name" onChange={() => { }} />
                </FormLayout>
              </Card>

              <Card sectioned>
                <FormLayout>
                  <DiscountValue />
                </FormLayout>
              </Card>

              <Card>
                <Card.Section>
                  <FormLayout>
                    <SaleCategory onSelect={this.handleSelect} />
                  </FormLayout>
                </Card.Section>
                {searchBar}
                <Card.Section>
                  <Picker />
                </Card.Section>

              </Card>
            </Layout.AnnotatedSection>
          </Layout>
        </Page>
      </AppProvider>

然后是 Picker 组件

import React from 'react';
import { ResourcePicker, Button } from '@shopify/polaris';

class Picker extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      resourcePickerOpen: false,
    }
  }

  render() {
    return (
      <div>
        <pre>{JSON.stringify(this.state.resourcePickerOpen)}</pre>
        <ResourcePicker
          resourceType="Product"
          open={this.state.resourcePickerOpen}
          onSelection={({ selection }) => {
            console.log('Selected products: ', selection);
            this.setState({ resourcePickerOpen: false });
          }}
          onCancel={() => this.setState({ resourcePickerOpen: false })}
        ></ResourcePicker>
        <Button onClick={() => this.setState({ resourcePickerOpen: !this.state.resourcePickerOpen })}>Open...</Button>
      </div>
    );
  }
}

export default Picker;

我希望选择器打开，但它没有。我做错了什么？

Answer 1

试着把你的状态声明像下面的代码 sn-p

class Picker extends React.Component {
    state = {
       resourcePickerOpen: false,
    }  

    ...

}

你可以删除你的构造函数