我尝试在没有装饰器的NextJs应用程序中实现MobX,但是当我在一个组件中更改存储数据时,在其他组件中将不会更改,但是当我使用装饰器时,效果很好。
CompanyStore.js
import {configure, action, observable, runInAction, decorate, computed} from "mobx"
import { useStaticRendering } from 'mobx-react'
const isServer = typeof window === 'undefined'
// eslint-disable-next-line react-hooks/rules-of-hooks
//useStaticRendering(isServer)
//configure({enforceActions: "observed"});
export class CompanyStore{
companies;
constructor() {
this.companies = [];
}
addCompany = (company) => {
this.companies.push(company);
}
}
decorate(CompanyStore, {
companies: observable,
addCompany: action
});
export async function fetchInitialCompanyState() {
// You can do anything to fetch initial store state
return {}
}
_app.js文件
import App from 'next/app'
import React from 'react'
import { CompanyStore , fetchInitialCompanyState,} from '../stores/CompanyStore'
import { Provider } from 'mobx-react'
class MySampleApp extends App{
state = {
store: new CompanyStore(),
}
static async getInitialProps(appContext) {
const appProps = await App.getInitialProps(appContext)
const initialCompanyState = await fetchInitialCompanyState()
return {...appProps, initialCompanyState }
}
static getDerivedStateFromProps(props, state) {
state.store.addCompany("India")
return state
}
render() {
const { Component, pageProps } = this.props
return (
<Provider CompanyStore={this.state.store}>
<Component {...pageProps} />
</Provider>
)
}
}
export default MySampleApp
index.js文件
import {Company} from "../component/Company"
import {Branch} from "../component/Branch"
export default function Index() {
return (
<div>
<Company></Company>
<Branch></Branch>
</div>
);
}
Company.js组件文件
import React from 'react'
import Link from 'next/link'
import { inject, observer } from 'mobx-react'
export class Company extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
this.handleChange = this.handleChange.bind(this);
this.saveCompany = this.saveCompany.bind(this);
}
componentDidMount() {
}
componentWillUnmount() {
}
saveCompany = (e) => {
e.preventDefault();
this.props.CompanyStore.addCompany(this.state.name);
this.setState({name: ''})
}
handleChange(e) {
this.setState({[e.target.name]: e.target.value});
}
render() {
const {CompanyStore} = this.props;
return (
<div>
<h1>Company: {CompanyStore.companyCount}</h1>
<form onSubmit={e => this.saveCompany(e)}>
<input type="text" name="name" onChange={this.handleChange} />
<button>Add Company</button>
</form>
<ul>
{
CompanyStore.companies.map(company => (
<li key={company}>{company}</li>
))
}
</ul>
</div>
)
}
}
Company = inject('CompanyStore')(observer(Company))
Branch.js组件
import React from 'react'
import Link from 'next/link'
import { inject, observer } from 'mobx-react'
export class Branch extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
const {CompanyStore} = this.props;
console.log("cm", CompanyStore);
return (
<div>
<h1>Branch:</h1>
<ul>
{
CompanyStore.companies.map(company => (
<li key={company}>{company}</li>
))
}
</ul>
</div>
)
}
}
Branch = inject('CompanyStore')(observer(Branch))
在此先感谢您的帮助。