내 코드가 오류를 던지고있는 이유를 모르십니까

내 서버에 내 React App을 렌더링하고 있으며 실제로 닫았지만 버그가 발생했습니다. 나는 온라인으로 수색했고 다른 모든 대답은 버그를 수정하지 못했다. 오류가 발생했습니다. Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)". 서버 코드, 색인 및 응용 프로그램을 제공했습니다. 현재의 모든 대답은 내가 한 렌더링 된 구성 요소를 래핑한다고 말하지만 여전히 오류가 발생합니다. / 경로는 앱 구성 요소를 렌더링합니다.내 코드가 오류를 던지고있는 이유를 모르십니까

서버 코드 :

app.get('*', (req, res) => { 
    const error =() => res.status(404).send('404'); 
    const htmlFilePath = path.join(__dirname, '../build', 'index.html'); 
    fs.readFile(htmlFilePath, 'utf8', (err, htmlData) => { 
    if(err) { 
     error() 
    } else { 
     match({ routes, location: req.url }, (err, redirect, ssrData) => { 
     if(err) { 
      error() 
     } else if(redirect) { 
      res.redirect(302, redirect.pathname + redirect.search); 
     } else if(ssrData) { 
      const store = createStoreWithMiddleware(reducers) 
      const provider = react.createElement(Provider, { store: store }, [RouterContext]); 
      const ReactApp = renderToString(provider); 
      const RenderedApp = htmlData.replace('{{SSR}}', ReactApp); 
     } else { 
      error() 
     } 
     }) 
    } 
    }) 
})

지수 :

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <Router history={browserHistory} routes={routes} /> 
    </Provider> 
    , document.getElementById('root'));

앱 :

class App extends Component { 

    componentWillMount() { 
    this.props.info(); 
    } 

    render() { 

    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ info }, dispatch); 
} 

export default connect(null, mapDispatchToProps)(App);

오류 : Unexpected token (8:15)

6 | switch(action.type) { 
    7 |  case TEST_CASE: 
> 8 |  return { ...state, check: true }; 
    |    ^
    9 |  case REAL_CASE: 
    10 |  return { ...state, check: false};

출처

2017-02-19 joethemow

바닐라 노드에서 펼쳐지는 객체 휴식과 같은 es6 기능을 사용할 수 없습니다. webpack을 사용하여 서버 번들을 컴파일하거나 해당 기능을 사용하지 않아야합니다. –

'babel-polyfill'을 설치하고 서버 코드 맨위에'require ('babel-polyfill')'을 실행했지만 여전히 오류가 발생했습니다. 다른 작업을해야합니까? – joethemow

Andy가 말했듯이 webpack을 사용하여 코드를 묶거나 서버 코드의 맨 위에'require ('babel-register')'를 넣고'.babelrc '를 작성하여'es2015'와 같은 사전 설정을 지정하십시오. –

<RouterContext />을 <Provider /> 구성 요소로 묶어야합니다. 서버 코드는 다음과 같습니다.

const store = createStoreWithMiddleware(reducers) 
const ReactApp = renderToString(
    <Provider store={store}> 
    <RouterContext {...ssrData} /> 
    </Provider> 
)

출처

2017-02-19 13:42:34

아, 하지만 앵커 태그가 없으면 어떻게 될까요? 노드는 그 문법을 인식하지 못합니다. 그래서'react.createElement'를 사용했습니다. – joethemow

'const provider = React.createElement (Provider, {store : store}, [RouterContext])''provider'를'renderToString() '. –

그래서 내 감속기'(createStoreWithMiddleware (reducers)) '에 경로를 추가 할 때 오류가 발생합니다. 'switch (action.type) { 7 | 케이스 상태 : > 8 | return {... state, status : true};'예기치 않은 토큰 – joethemow

내 코드가 오류를 던지고있는 이유를 모르십니까

답변

관련 문제