使用Redux提供程序包装应用程序时出错

Question

这是我尝试使用Redux:包装TypeScript React应用程序时遇到的错误

错误：对象作为React子对象无效(已找到：具有键｛children｝的对象(。如果要渲染子对象的集合，请改用数组。

这里是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(
<React.StrictMode>
<StoreWrapper>
<App />
</StoreWrapper>
</React.StrictMode>,
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) => {
return <Provider store={ store }>{ children }</Provider>;
};
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 
) => {
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;

我错过了什么？

Answer 1

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