React.Children.only erwartet, dass ein einzelnes React-Element Kindfehler empfangen wird

Question

Ich erhalte 'React.Children.only erwartet ein einzelnes React-Element Kind.' aus dem folgenden Code.

Ich habe eine neue react-App mit create-react-app erstellt und redux und react-redux installiert und einen einfachen Reducer erstellt und damit Speicher angelegt.

import React from "react"; 
import ReactDOM from "react-dom"; 
import { createStore, combineReducers } from "redux"; 
import { Provider } from "react-redux"; 

import logo from './logo.svg'; 
import './App.css'; 

class App extends React.Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 


function productReducer(state = [], action) { 
    return state; 
} 

const store = createStore(
    productReducer 
); 

ReactDOM.render((<Provider store={store}><App /> </Provider>), document.getElementById('root')); 

Answer 1

Sie haben einen Raum hier:

       ↓ 
<Provider store={store}><App /> </Provider> 

JSX ist ein bisschen pingelig Abstand auf einzelnen Linien. Sie können entweder entfernen Sie den Raum:

<Provider store={store}><App /></Provider> 

Oder es brechen auf, um mehrere Zeilen:

<Provider store={store}> 
    <App /> 
</Provider>