Question

我是React的新手，想要将它集成到现有的应用程序中，以便将UI更新为材料设计（用于浏览和构建我使用Babel和webpack的应用程序）。除此之外，我还要整合material-ui-bottom-sheet提供的底片组件。但是，当组件按预期显示在我的应用程序中时，用于设置组件状态（以及因此其可见性）的回调导致

Uncaught ReferenceError: setState is not defined
at onRequestClose (verwaltung.js?8a80:70)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js?8875:69)
at executeDispatch (EventPluginUtils.js?5685:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js?5685:108)
at executeDispatchesAndRelease (EventPluginHub.js?3c44:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js?3c44:54)
at Array.forEach (<anonymous>)
at forEachAccumulated (forEachAccumulated.js?2859:24)
at Object.processEventQueue (EventPluginHub.js?3c44:254)
at runEventQueueInBatch (ReactEventEmitterMixin.js?9870:17)

由于我复制了官方示例网站（https://teamwertarbyte.github.io/material-ui-bottom-sheet/）中的代码，其中提供了工作示例，我想知道导致此行为的原因以及为什么这对我不起作用。我的应用程序显示组件的相关代码如下：

HTML：

[...]
<div id="bottom-sheet"></div>
[...]

使用Javascript：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

// Bottom sheet
import { ExpandableBottomSheet, BottomSheet } from 'material-ui-bottom-sheet';
import { List, ListItem, Subheader, FloatingActionButton } from 'material-ui';
import MapsDirectionsCar from 'material-ui/svg-icons/action/done';
import Divider from 'material-ui/Divider';

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

const InfoSheet = () => (
    <MuiThemeProvider>
        <div>
            <ExpandableBottomSheet
                action={
                    <FloatingActionButton>
                        <MapsDirectionsCar/>
                    </FloatingActionButton>
                }
                onRequestClose={() => setState({isOpen: false})}
                open
            >
                <h1 style={{marginLeft: 72, marginTop: 40}}>Dandelion Chocolate</h1>
                <Divider inset/>
                <List>
                    <ListItem primaryText="740 Valencia St, San Francisco, CA"/>
                    <ListItem primaryText="(415) 349-0942"/>
                    <ListItem primaryText="Wed, 10 AM - 9 PM"/>
                    <ListItem primaryText="740 Valencia St, San Francisco, CA"/>
                </List>
            </ExpandableBottomSheet>
        </div>
    </MuiThemeProvider>
);

ReactDOM.render(
    <InfoSheet />,
    document.getElementById('bottom-sheet')
);

如果我尝试将＆＃34;打开＆＃34; 属性设置为＆＃34; {state.isOpen}＆＃34; ，则应用程序会抛出另一个错误，表示＆＃34;州＆＃34; 未定义。

我在这里缺少什么，为什么 setState 和状态不在组件的范围内？

Answer 1

您的InfoSheet组件是无状态组件，没有lifecycle functions，state或this关键字。编写InfoSheet组件以将React.Component类扩展为

class InfoSheet extends React.Component {
 constructor(props) {
   super(props);
   this.state = {isOpen: true}
 }
 render() {
    return (
       <MuiThemeProvider>
        <div>
            <ExpandableBottomSheet
                action={
                    <FloatingActionButton>
                        <MapsDirectionsCar/>
                    </FloatingActionButton>
                }
                onRequestClose={() => this.setState({isOpen: false})}
                open={this.state.isOpen}
            >
                <h1 style={{marginLeft: 72, marginTop: 40}}>Dandelion Chocolate</h1>
                <Divider inset/>
                <List>
                    <ListItem primaryText="740 Valencia St, San Francisco, CA"/>
                    <ListItem primaryText="(415) 349-0942"/>
                    <ListItem primaryText="Wed, 10 AM - 9 PM"/>
                    <ListItem primaryText="740 Valencia St, San Francisco, CA"/>
                </List>
            </ExpandableBottomSheet>
        </div>
    </MuiThemeProvider>
    )
 }
}

＆＃34; setState未定义＆＃34;使用第三方React组件

1 个答案: