小编Wri*_*ate的帖子

使用桌面浏览器（仅限 Chrome）时，我有一个有效的注册和登录端点，但当尝试使用移动浏览器注册或登录时，服务器超时。我怀疑这是因为我的会话 cookie 和 csurf cookie 没有随我的获取请求一起发送。

我在手机浏览器上打开了Safari开发，它没有显示任何cookie。我现在怀疑这是因为 MaxAge——

请注意，我的 api 和客户端位于不同的域：Heroku 和 Netlify。请参阅下面的代码：

CORS 选项

const options = {

  origin: "clientUrl",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  allowedHeaders: [
    "Content-Type",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
    "Authorization",
    "csrf-token"
  ],
  exposedHeaders: [
    "Content-Type",
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Origin",
    "Authorization",
    "csrf-token"
  ],

  maxAge: 3600,
  preflightContinue: true,
  credentials: true
};

CSURF配置

app.use(
  csurf({
    cookie: true,
    domain: "clientUrl",
    sameSite: "none"
  })
);

快速会话配置

app.use(
  session({
    //This is our Encryption Key
    secret: process.env.sessionCode,
    //We set resave to false because our mongo store implements the "touch" …

此表单用于编辑用户配置文件。它应该加载初始值的最新用户数据。为了处理这个问题，我在 useEffect 中添加了一个 redux fetchUser 操作，并将表单的初始值设置为 redux 存储中的 currentUser 。fetchUser 访问数据库端点并更新 redux 存储中的 currentUser。

但是，如果我提交表单并重新加载页面，则初始数据不会更新。

我不确定为什么我的初始值/表单与我的 redux 存储不同步。如果我离开表单并导航回表单两次，该表单将更新为正确的数据。

我的假设是表单不会在每次渲染组件时重置初始值。看起来数据是持久的。我尝试将一个对象传递给resetForm()以强制更新初始值，但这会导致同样的问题。如果

这是完整的反应组件：

import { Formik, Form, Field, ErrorMessage } from "formik"
//redux action that fetches current user
import { fetchUser } from "../../actions"
import { connect } from "react-redux"
import profileSchema from "./yupSchema"
import updateProfile from "./updateAxiosCall"

const submitData = (data, resetForm, tagNames) => {
  const newProfile = { ...data}
  //end point call - working as intended
  updateProfile(newProfile)
  resetForm()
}

const ProfileForm …

据我所知，在 shouldComponentUpdate 中使用 nextProps 和 nextState 来根据 this.state.someProperty 与 nextState.someProperty 的比较结果来确定组件是否应该重新渲染。如果它们不同，则组件应该重新渲染。

这很清楚。

然而，事实似乎并非如此。查看此代码。

    class Box extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }

   this.counter = 
     this.counter.bind(this)
  }

  counter() {
    setInterval(()=>{
      this.setState({count: this.state.count+=1})
    }, 10000);
  }

  componentDidMount() {
    this.counter();
  }

  shouldComponentUpdate(nextProps, nextState) { 
    console.log(this.state.count + " " +  nextState.count)
    return true;
  }

  render() {
    return (
      <div> 
        <h1>This App Counts by the Second </h1>
        <h1>{this.state.count}</h1> 
    </div>
    );
  }
};

在 shouldComponentUpdate 中，我记录了 state.count 和 nextState.count 值，并且它们每次都是相等的。他们不应该有所不同吗？如果不是，如果使用 setState …