使用第三方React组件时引发的"setState未定义“

Question

我是新的反应，并希望将它集成到一个现有的应用程序，以更新UI的材料设计(用于转储和建设应用程序，我正在使用Babel和webpack)。除其他事项外，我希望集成由材料-用户界面-底片提供的底部表组件。但是，当组件以预期的方式出现在我的应用程序中时，用于设置组件状态(以及它的可见性)的回调将导致

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')
);

如果我试图将"{state.isOpen}"设置为“打开”属性，则应用程序会引发另一个错误，即"state"是未定义的。

我在这里遗漏了什么，为什么setState和state不在组件的范围内？

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>
    )
 }
}