javascript - React 中的 Mobx 存储不会重新渲染组件
问题描述
我正在尝试了解 mobx。在注释造成很多麻烦之后,我决定使用这里描述的全局存储。我的商店是这样的:
import {
makeObservable,
observable,
action
} from "mobx";
class Store {
constructor() {
makeObservable(this, {
fetchWorkouts: action,
user: observable,
allWorkouts: observable,
selectedWorkout: observable,
currentStep: observable,
setUser: action
})
}
user = {
uid: null,
email: null,
name: null
}
allWorkouts = []
selectedWorkout = {}
currentStep = 0
fetchWorkouts() {
}
setUser(newUser) {
this.user = newUser;
}
}
const store = new Store()
export default store;
我的新用户直接来自登录,如下所示:
import {Button} from "semantic-ui-react";
import {useHistory} from "react-router-dom"
import React from 'react';
import store from "../../context/Store";
import {toJS} from "mobx";
export default function SubmitLogin(props) {
let history = useHistory();
// eslint-disable-next-line react-hooks/exhaustive-deps
const loginUser = async () => {
let bodyObj = {
email: props.email,
pw: props.password
}
let queryString = "http://localhost:3001/user/login/" + bodyObj.email + "/" + bodyObj.pw;
await fetch(queryString).then(response => response.json()).then(json => store.setUser(json)).then(() => console.log(toJS(store.user))).then(() => history.push("/"));
}
return (
<>
<Button className={"loginRegisterButton"} onClick={loginUser}>Submit</Button>
</>
)
}
为了测试一切,我试图在我的标题中显示 uid,如下所示:
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import store from "../context/Store";
class Toolbar extends Component {
render() {
return (
<div id={"toolbarDiv"}>
<p style={{color: "white"}}>{store.user.uid}</p>
</div>
);
}
}
export default Toolbar
但是,即使在我从服务器接收到 uid 并可以在我的登录组件中打印它之后,我仍假设数据已正确分配给存储中的用户变量。不幸的是,在按下登录按钮并重定向到“/”后,工具栏中没有任何内容。如何正确访问变量?
解决方案
我认为您仍然需要在通话Toolbar
中进行包装:SubmitLogin
observer
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import { observer } from "react-mobx";
import store from "../context/Store";
class Toolbar extends Component {
render() {
return (
<div id={"toolbarDiv"}>
<p style={{color: "white"}}>{store.user.uid}</p>
</div>
);
}
}
export default observer(Toolbar);
推荐阅读
- java - 如何在 Java SE 中激活自动 JPA 实体验证?
- unity3d - Google Play 游戏未登录(不显示弹出窗口)
- python - Kivy 自定义动画功能
- android - 如何避免 Animator 动画的加速/减速?
- python - 如何将格式化句子数组传递给 Flask 模板?
- javascript - 当用户在地址栏 Angular 上单击输入时检测事件
- php - 在 Laravel 中更新大量条目的最佳方法
- powershell - 在 Windows 10 上通过 ssh 在 cygwin 上获得 rsync 的神奇组合
- google-cloud-firestore - 用户喜欢 Firestore 中的结构以避免高读取次数
- c# - “字符串 []”不包含“包含”的定义