web-dev-qa-db-ja.com

Reactエラー 'propTypeの失敗：無効なprop `children`が` Provider`に提供されました。単一のReactElementが必要です

react.jsに問題があります。これは私のコードです：

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App';
import todoApp from './reducers';

let store = createStore(todoApp);
let rootElement = document.getElementById('root');

React.render(
    <Provider store={store}>
        {() => <App />}
    </Provider>,
    rootElement
);

ページを実行し、それは言った：

失敗したpropType：無効なprop childrenがProviderに提供されました。単一のReactElementが必要です

これは、関連するインストール済みノードモジュールのリストです。

  • 反応する15.0.1
  • react-redux 4.4.5
  • redux 3.4.0

実際、私は現在ReduxでReactを学んでいるので、どうすればいいのかが難しいです。私はちょうどウェブサイトのチュートリアルに従いました（リンクを与えることができますが、英語ではありません）が、そのエラーメッセージで動作していません。私が検索したように、誰かがreactとreact-reduxのアップグレードバージョンを言ったが、私は最新バージョンをインストールした。アドバイスは非常に感謝します。

javascriptreactjsreduxreact-redux
32
modernator

ドキュメント によると、<Provider />内の関数の代わりに、通常のReact要素を使用できます。

その結果、コードを単に

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

[email protected]以降、これは変わったと思います。

19
wuct

元の質問にはタイプミスがありました。適切な構文で応答が正しい。

ただし、直接的な理由は、<App />を別の行に配置する必要があるためです。

<Provider store={store}>と同じ行に配置すると、React/Reduxは本来よりも多くのことを試みます。

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

私はこれに連れて行かれ、私は単に小道具を提供するのを忘れました。 allコンポーネントが使用している小道具を提供し、should修正するようにしてください。

0
str8up7od