Question

我正在使用axios库直接从服务器端渲染数据。我的代码似乎是写的，但我不知道问题出在哪里。我的数据一直到结束但没有显示。 Console.log(this.props.contests)显示数据，但在重新加载页面时显示未找到数据。

这是我的serverRender.js：

fetch data directly from api
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from './src/component/App'
import axios from 'axios'
import config from './config'

这会将数据发送到App.js：

const serverRender = () => 
    axios.get(`${config.serverUrl}/api/contests`).then(res => {
        return ReactDOMServer.renderToString(
            <App initialContests={res.data.contests} />
        );
    });
export default serverRender;

据我了解，数据可以达到此目的，但是在返回数据时，当console.log(this.state.contests)数据及时出现时，这种消失就消失了。

这里是App.js：

class  App extends React.Component {
    state = {
        pageHeader: 'Naming Contest',
        contests: this.props.initialContests
    };

    render(){
        return(
            <div className = 'App' >
                <Header Msg = {this.state.pageHeader}/>
                <div>
                    {
                        this.props.initialContests != null ?
                        this.props.initialContests.map(contest => 
                            <ContestPreview key={contest.id} {...contest} />) : console.log("Data not found")
                    }
                </div>
            </div>

        );
    }
}
export default App;

但是在chrome上，找不到数据 server.js：

const server = express();

server.use(sassmiddleware({
    src: path.join(__dirname + '/sass/style.scss'),
    dest: path.join(__dirname + '/public')
}))
server.set('view engine', 'ejs');

import serverRender from './serverRender'

server.get('/',(req,res)=>{
    serverRender().then(content => {
        res.render('index', {
            content
        });
    }).catch(console.error)
});

server.use('/api', apiRouter);
server.use(express.static('public'));
server.listen(config.port, config.host,() =>{
    console.info('Express listening on port. ', config.port);
});

index.js/src:

axios.get('/api/contests').then(res=>{
    ReactDOM.render(
        <App initialContest = {res.data.contests} />,
        document.getElementById('root') 
    )
}).catch(console.

初始比赛是财产。我希望比赛列表会显示在端口上，但显示未找到数据。

正在使用axios

0 个答案: