如何解决React.useEffect 在 Express 应用程序中不起作用
状态似乎没有改变或重新渲染。我曾尝试从 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 都不能运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。