Question

我是新来的人。
我正在尝试显示一个组件。
但是现在我遇到了错误
所以我调试并评论了该应用。
但我仍然遇到错误。
您能告诉我如何修复，以便将来我自己修复吗
在下面提供我的代码段和stackblitz代码。

https://stackblitz.com/edit/react-zm9t65?file=components%2FApp.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import LoadingBar from "react-redux-loading-bar";

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'
import reducer from './reducers'
//import App from "./components/App"

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)
render(
  <Provider store={store}>
  //  <App />
             <LoadingBar />

  </Provider>,
  document.getElementById('root')
)

Answer 1

问题不在代码中，而在注释语句中。

//不是jsx注释语句。 {/* ... */}是jsx注释。

将代码更改为

index.js

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)
render(
  <Provider store={store}>
    <App>
       <LoadingBar />
    </App>
  </Provider>,
  document.getElementById('root')
)

App.js

const App = () => (
  <div> Hello World
    {/* < RecentChannelItem />
    < ChannelsField />
    <Button />
    <TopNews /> */}
  </div>
)
export default App;

Answer 2

您不能将App和LoadingBar作为子项添加到Provider中，因为它希望只有一个子项肯定是您的App组件，实际上这是不合适的完全添加LoadingBar的地方。

我刚刚将index.js修改如下：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import LoadingBar from "react-redux-loading-bar";

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'
import reducer from './reducers'
import App from "./components/App"

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)
render(
  <Provider store={store}>
   <App />
  </Provider>,
  document.getElementById('root')
)

App.js：

import React from 'react'
// import ChannelsField from './ChannelsField'
// import RecentChannelItem from './RecentChannelValues'

// import Button from '../containers/Button'
// import TopNews from '../containers/TopNews'
const App = () => (
  <div>
    <h1> Hello </h1>
  </div>
)
export default App;

该组件已呈现，我可以看到Hello。

在等待异步任务完成（例如，从API提取数据）时，通常会在组件内部使用诸如LoadingBar之类的元素来显示

因此，我建议使用import（或任何其他组件）中的App语句导入它并使用它。

无法以Redux方式呈现我的React组件

2 个答案: