问题描述
状态似乎没有改变或重新渲染。我曾尝试从 useEffect 内部进行日志记录,但没有任何反应。知道如何让 useEffect 工作吗?
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
// view engine setup
app.set('view engine','jsx');
app.engine('jsx',require('express-react-views').createEngine());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname,'public')));
app.get('bots/burrito',function(req,res,next) {
//res.render('bot')
res.render('bot')
});
// catch 404 and forward to error handler
app.use(function(req,next) {
next(createError(404));
});
// error handler
app.use(function(err,req,next) {
// set locals,only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
console.log(err)
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
bot.jsx
import React from 'react';
const tutorials=(props)=>{
const [a,setA] = React.useState('asdf')
React.useEffect( ()=>{
setA('asdfasfdasdfa')
},[] );
return(
<p>{a}</p>
)
}
module.exports = tutorials;
当我导航到 https://localhost:3000/bots/burrito
时,我看到呈现的 <p>asdf</p>
并且它永远不会改变。
解决方法
express-react-views
在幕后调用 ReactDOM.renderToStaticMarkup
。该函数返回组件的初始 HTML 并且不会尝试应用钩子,如here:
如果您使用服务器渲染,请记住,在下载 JavaScript 之前,useLayoutEffect 和 useEffect 都不能运行。