如何修复 React.Children.only 期望在 react.js 中接收单个 React 元素子项？

Posted 2023-02-19

【中文标题】如何修复 React.Children.only 期望在 react.js 中接收单个 React 元素子项？

【英文标题】：How to fix React.Children.only expected to receive a single React element child in react.js?

【发布时间】：2021-09-19 18:51:22

【问题描述】：

我正在开发一个使用 redux 进行状态管理的 React 应用程序，但在渲染应用程序时出现以下错误。

在npm start 上，一个空白的白色屏幕在控制台中呈现以下错误。

react.development.js:220 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Provider`, expected a single ReactElement.
    at Provider (http://localhost:3000/static/js/bundle.js:87358:27)

react.development.js:1139 Uncaught Error: React.Children.only expected to receive a single React element child.
    at Object.onlyChild [as only] (react.development.js:1139)
    at Provider.render (Provider.js:60)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at htmlUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)

这是我的app.js 和index.js：

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import  Provider  from "react-redux";
import configureStore from "../src/clientDashboard/configureStore";
import  combineReducers  from "redux";
import clients from "../src/clientDashboard/actions/clientReducer";
import Layout from "./clientDashboard/Layout";
export default combineReducers(
  clients: clients,
);

const store = configureStore();
ReactDOM.render(
  <Provider store=store>
    <App/>,
  </Provider>,
  document.getElementById("root")
);

app.js

import React,  Component  from "react";
import logo from "./logo.svg";
import "./App.css";
import Layout from "./clientDashboard/Layout";
import  BrowserRouter as Router, Route  from "react-router-dom";
import  Button  from "semantic-ui-react";

class App extends Component 
  render() 
    return (
      <div className="App">
        <Layout />
      </div>
    );
  


export default App;

这是我的Layout component 供您参考：

import  Grid, Form  from 'semantic-ui-react';
import Typography from './ui-components/Typography';
import Table from './Table/Layout';
import Input from './SearchInput';
import styled from './constants/style/styled';
import colorPalette from './constants/style/colorPalette';
import CreatePopup from './Form/Popup';


const StyledTypography = styled(Typography)`
  padding-right: 8px ;
`;


const StyledGridRow = styled(Grid.Row)`
  padding-top: $props => props.paddingtop !important;
  padding-bottom: $props => props.paddingbottom !important;
`;


const Layout = () => (
  <div>
    <Grid columns='equal'>
      <Grid.Row>
        <Grid.Column textAlign='left' width=13>
          console.log("grid-col")
          <Typography color=colorPalette.instaGrey7 size='big' bold className='inline'>clients</Typography>
        </Grid.Column>
        <Grid.Column width=3 textAlign='right'>
          console.log("popup")
          <CreatePopup position='bottom right' triggertext='client' width='calc(100vw - 300px)' />
        </Grid.Column>
      </Grid.Row>
      <StyledGridRow paddingbottom='5px'>
        <Grid.Column width=6>
          <Typography color=colorPalette.instaGrey7 size='small' bold className='inline'>'ui.label.client.list.allcaps'</Typography>
          console.log("typo")
        </Grid.Column>
        <Grid.Column textAlign='right' width=10>
          <Form>
            console.log("form")
            <StyledTypography color=colorPalette.instaGrey7 size='small' className='inline'>'ui.label.search.client'</StyledTypography>
            <Input />
            console.log("input")
          </Form>
        </Grid.Column>
      </StyledGridRow>
      <StyledGridRow paddingtop='5px'>
        <Grid.Column>
          <Table />
        </Grid.Column>
      </StyledGridRow>
      console.log("gridnnd")
    </Grid>
   console.log("div")
  </div>

);


export default Layout;

P.S：我尝试用React.Navigator 包装 index.js 渲染元素，但仍然出现错误。

任何帮助将不胜感激。

问候

【参考方案1】：

据我了解，问题出在这里：

  <Provider store=store>
    <App/>, <- error is here, remove  and ,
  </Provider>

你试图设置多个 React 元素，你的第一个元素是<App/>，第二个元素是,，但Provider 只需要一个元素。 您应该将代码更改为以下内容：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import  Provider  from "react-redux";
import configureStore from "../src/clientDashboard/configureStore";
import  combineReducers  from "redux";
import clients from "../src/clientDashboard/actions/clientReducer";
import Layout from "./clientDashboard/Layout";
export default combineReducers(
  clients: clients,
);

const store = configureStore();
ReactDOM.render(
  <Provider store=store>
    <App/>
  </Provider>,
  document.getElementById("root")
);

希望对你有帮助