"setState is not defined" 使用第 3 方 React 组件时抛出

Question

我是 React 的新手，想将其集成到现有应用程序中以将 UI 更新为 material 设计（为了转译和构建我正在使用 Babel 和 webpack 的应用程序） .除其他事项外，我还想集成 material-ui-bottom-sheet 提供的 bottomsheet 组件。但是，虽然组件按预期显示在我的应用程序中，但用于设置组件状态（及其可见性）的回调会导致

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

如果我尝试将 "open" 属性设置为 "{state.isOpen}" 应用程序抛出另一个错误，指出 "state" 未定义。

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

Answer 1

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

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

"setState is not defined" 使用第 3 方 React 组件时抛出

"setState is not defined" thrown when using 3rd party React Component

reactjs

material-ui

bottom-sheet