Javascript TypeError:无法读取属性'；准备样式'；未定义的

我的

组件

看起来像

import React, {PropTypes} from 'react';
import TransactionListRow from './TransactionListRow';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table';

const TransactionList = ({transactions}) => {
  return (
    <Table>
      <TableHeader displaySelectAll={false}>
        <TableRow>
          <TableHeaderColumn>Name</TableHeaderColumn>
          <TableHeaderColumn>Amount</TableHeaderColumn>
          <TableHeaderColumn>Transaction</TableHeaderColumn>
          <TableHeaderColumn>Category</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody>
        {transactions.map(transaction =>
          <TransactionListRow key={transaction.id} transaction={transaction}/>
        )}
      </TableBody>
    </Table>
  );
};

TransactionList.propTypes = {
  transactions: PropTypes.array.isRequired
};

export default TransactionList;

当我运行测试时，我看到

 1) <TransactionList /> renders four <TableHeaderColumn /> components:
     TypeError: Cannot read property 'prepareStyles' of undefined
      at Table.render (node_modules/material-ui/Table/Table.js:155:48)
      at node_modules/react/lib/ReactCompositeComponent.js:793:21
      at measureLifeCyclePerf (node_modules/react/lib/ReactCompositeComponent.js:74:12)
      at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:792:27)
      at ReactCompositeComponentMixin._renderValidatedComponent (node_modules/react/lib/ReactCompositeComponent.js:819:34)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:361:30)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:105:32)
      at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:127:15)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
      at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:321:18)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:402:32)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:423:23)
      at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:84:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:175:26)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:87:59)
      at mount (node_modules/enzyme/build/mount.js:21:10)
      at Context.<anonymous> (TransactionList.test.js:7:1)

1）呈现四个组件：
TypeError:无法读取未定义的属性“prepareStyles”
在Table.render（节点\模块/material ui/Table/Table.js:155:48）
在节点_modules/react/lib/ReactCompositeComponent.js:793:21
在measureLifeCyclePerf（node_modules/react/lib/ReactCompositeComponent.js:74:12）
在ReactCompositeComponentMixin.\u renderValidatedComponent没有自己的或上下文（节点\u modules/react/lib/ReactCompositeComponent.js:792:27）
在ReactCompositeComponentMixin.\u renderValidatedComponent（节点\u modules/react/lib/ReactCompositeComponent.js:819:34）
在ReactCompositeComponentMixin.PerformitialMount（节点_modules/react/lib/ReactCompositeComponent.js:361:30）
在ReactCompositeComponentMixin.mountComponent（节点_modules/react/lib/ReactCompositeComponent.js:257:21）
在Object.ReactReconciler.mountComponent（node_modules/react/lib/ReactReconciler.js:47:35）
在ReactCompositeComponentMixin.PerformitialMount（节点_modules/react/lib/ReactCompositeComponent.js:370:34）
在ReactCompositeComponentMixin.mountComponent（节点_modules/react/lib/ReactCompositeComponent.js:257:21）
在Object.ReactReconciler.mountComponent（node_modules/react/lib/ReactReconciler.js:47:35）
在ReactCompositeComponentMixin.PerformitialMount（节点_modules/react/lib/ReactCompositeComponent.js:370:34）
在ReactCompositeComponentMixin.mountComponent（节点_modules/react/lib/ReactCompositeComponent.js:257:21）
在Object.ReactReconciler.mountComponent（node_modules/react/lib/ReactReconciler.js:47:35）
在ReactCompositeComponentMixin.PerformitialMount（节点_modules/react/lib/ReactCompositeComponent.js:370:34）
在ReactCompositeComponentMixin.mountComponent（节点_modules/react/lib/ReactCompositeComponent.js:257:21）
在Object.ReactReconciler.mountComponent（node_modules/react/lib/ReactReconciler.js:47:35）
在mountcomponentonode（node_modules/react/lib/ReactMount.js:105:32）
在ReactReconcietTransaction.Mixin.perform（node_modules/react/lib/Transaction.js:138:20）
在BatchedMountComponentNode（node_modules/react/lib/ReactMount.js:127:15）
在ReactDefaultBatchingStrategyTransaction.Mixin.perform（node_modules/react/lib/Transaction.js:138:20）
在Object.ReactDefaultBatchingStrategy.BatchedUpdate（node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19）
在Object.batchedUpdate（node_modules/react/lib/ReactUpdates.js:98:20）
位于Object.ReactMount.\u renderNewRootComponent（节点\u modules/react/lib/ReactMount.js:321:18）
在Object.ReactMount.\u renderSubtreeIntoContainer（节点\u modules/react/lib/ReactMount.js:402:32）
在Object.ReactMount.render（node_modules/react/lib/ReactMount.js:423:23）
在Object.reactestutils.renderIntoDocument（node_modules/react/lib/reactestutils.js:84:21）
在renderWithOptions（node_modules/enzyme/build/react compat.js:175:26）
在新的ReactWrapper（node_modules/enzyme/build/ReactWrapper.js:87:59）
装载时（node_modules/enzyme/build/mount.js:21:10）
在上下文中。（TransactionList.test.js:7:1）

---

请帮助我了解出了什么问题，我应该如何解决？我不熟悉

React

及其生态系统您需要将您的表包装在MuiThemeProvider标记中

比如：

从“材质ui/样式/MuiThemeProvider”导入MuiThemeProvider
const TransactionList=（{transactions}）=>{
返回(
...
);
};

如果我们按照物料界面wesite中显示的顺序执行说明，我们可以在那里找到解决方案，即在使用部分。他们已经声明了在使用任何组件之前将主题定义为提供者的先决条件。这些主题也可以定制

用片段清楚地说明-

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“./MyAwesomeReactComponent”导入MyAwesomeReactComponent；
常量应用=（）=>(
);
ReactDOM.render(
,
document.getElementById（'app'）
);

这篇文章有帮助吗？每个人，这个->底部的答案，把代码放到你的课堂上。我是新材料世界。被metor+react+matarial困了两天。我认为这是metor的问题。

 1) <TransactionList /> renders four <TableHeaderColumn /> components:
     TypeError: Cannot read property 'prepareStyles' of undefined
      at Table.render (node_modules/material-ui/Table/Table.js:155:48)
      at node_modules/react/lib/ReactCompositeComponent.js:793:21
      at measureLifeCyclePerf (node_modules/react/lib/ReactCompositeComponent.js:74:12)
      at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:792:27)
      at ReactCompositeComponentMixin._renderValidatedComponent (node_modules/react/lib/ReactCompositeComponent.js:819:34)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:361:30)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:105:32)
      at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:127:15)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
      at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:321:18)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:402:32)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:423:23)
      at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:84:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:175:26)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:87:59)
      at mount (node_modules/enzyme/build/mount.js:21:10)
      at Context.<anonymous> (TransactionList.test.js:7:1)

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

const TransactionList = ({transactions}) => {
  return (
    <MuiThemeProvider>
      <Table>
...
      </Table>
    </MuiThemeProvider>
  );
};

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);