Блог

Это ошибка, которую я получаю, когда пытаюсь обернуть свое приложение TypeScript React с помощью Redux:

Ошибка: Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {дочерние элементы}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

Вот index.tsx :

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';  import StoreWrapper from './Store/StoreWrapper/StoreWrapper';   ReactDOM.render(  lt;React.StrictModegt;  lt;StoreWrappergt;  lt;App /gt;  lt;/StoreWrappergt;  lt;/React.StrictModegt;,  document.getElementById('root') ); reportWebVitals();  

Это StoreWrapper.tsx :

 import React from 'react'; import { Provider } from 'react-redux'; import { applyMiddleware, combineReducers, compose, createStore } from 'redux'; import thunk from 'redux-thunk';  import AuthReducer from '../Reducers/Authentication';  const composeEnhancers =  (window as any).__REDUX_ DEVTOOLS_EXTENSION_COMPOSE__ || compose;  const rootReducer = combineReducers({  auth: AuthReducer });  const store = createStore(  rootReducer,  composeEnhancers(applyMiddleware(thunk)) );  const StoreWrapper = (children: any) =gt; {  return lt;Provider store={ store }gt;{ children }lt;/Providergt;; };  export default StoreWrapper;  

Это редуктор аутентификации:

 import * as actionTypes from '../Actions/actionTypes';   const init = {  token: null,  userId: null,  loading: false,  error: null };  const reducer = (  state = init,  action: any  ) =gt; {  switch (action.type) {  case actionTypes.AUTH_INIT:  return {  ...state,  error: null,  loading: true  };   case actionTypes.AUTH_SUCCESS:  return {  ...state,  error: null,  loading: false,  token: action.token,  userId: action.userId  };   case actionTypes.AUTH_FAIL:  return {  ...state,  error: action.error,  loading: false  };   case actionTypes.AUTH_LOGOUT:  return {  ...state,  token: null,  userId: null  };   default:  return state;  } };  export default reducer;  

Что я упускаю?

 type Props = {  children: React.ReactNode } const StoreWrapper = ({children}: Props) =gt; { // You need to destructure props  return lt;Provider store={store}gt;{children}lt;/Providergt;; };