使用
- 下载mobx库和mobx-react-lite库
- 创建store.js
import { observable, action,makeAutoObservable } from 'mobx';
class BookStore{
bookList=[];
count=0;
constructor(){
makeAutoObservable(this); //使变量自动变成observerable变量
}
add=()=>{
this.count++;
}
addBook=(book)=>{
fetch('/book/add')
}
getBookList=()=>{
fetch('/book/list')
}
}
}
let bookStore=new BookStore();
export default bookStore
3.在react组件中observer包裹文章来源地址https://www.toymoban.com/news/detail-509607.html
import { observer } from 'mobx-react-lite';
const BookList= observer(() => {
return()
})
注意事项
1.mobx里的observer变量必须放在react render组件里才会刷新
{/* render的组件里必须有mobx store的值才会刷新 */}
return (
<Button onClick={()=>{
localUserStore.add()
}}>
{localUserStore.count}
</Button>
)
2.非基础类型需要用toJs转换
在store.js定义
data={"id":1,"name","abc"}
在react中使用
toJs(store.data)
3.请求初始化数据在UseEffect中执行
useEffect(() => {
bookStore.getBorrowList();
}, []);
文章来源：https://www.toymoban.com/news/detail-509607.html
到了这里，关于react使用mobx6动态加载数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
