问题描述
我想做什么;
这是我的 UserStore.ts
import { observable,action } from 'mobx';
import { getUser } from '../api/api';
export class UserStore {
@observable users: [{
firstName: string;
surName: string;
dateofBirth: string;
ethnicity: string,maritalStatus: string,}]
@action
loadUser = () => {
getUser().then(users => this.users = users)
console.log(this.users)
}
}
这是我检索 data.ts 的 Api 调用 这个后端 API 在 Visual Studio 上作为一个单独的项目运行,我已经检查过它是否正常工作,并且在通过邮递员请求时能够收到 200 响应。
export const getUser = ():Promise<[{ firstName: string; surName: string; dateofBirth: string; ethnicity: string; maritalStatus: string; }]> => {
return fetch('https://localhost:5001/api/personalInfo/1').then(res => res.json())
}
这是我的 RootStateContext 这样我就可以在项目的任何地方使用 Store
import React from 'react';
import { UserStore } from '../stores/UserStore';
type RootStateContextValue = {
userStore: UserStore;
};
const RootStateContext = React.createContext<RootStateContextValue>({} as.
RootStateContextValue);
const userStore = new UserStore();
export const RootStateProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
return <RootStateContext.Provider value={{ userStore }}> {children}
</RootStateContext.Provider>;
};
export const useRootStore = () => React.useContext(RootStateContext);
这是我的 index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { browserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';
import App from './App';
import { RootStateProvider } from './context/RootStateContext';
import './css/main.css';
ReactDOM.render(
<browserRouter basename={'myCareer'}>
<RootStateProvider>
<App />
</RootStateProvider>
</browserRouter>,document.getElementById('root'),);
这是我的 Personalinformation_Card.tsx,我试图在其中映射来自 UserStore 的数据并显示它
export default function Personalinformation_Paper() {
const { userStore } = useRootStore();
return uSEObserver(() => (
<>
<div>
{userStore.users.map((user) => {
return (
<option key={user.firstName} value={user.firstName}>
{user.firstName}
</option>
);
})}
</div>
</>
));
}
在此页面中,我不断收到错误消息;类型错误:无法读取未定义的属性“地图”。我认为这是因为没有执行 API 调用,并且没有填充商店,所以没有什么可映射的,但是我不确定。有人可以帮忙吗?
谢谢
*编辑以按要求显示 console.log(userStore)
*编辑以在更改时显示 console.log(userStore)
@observable users: [{
firstName: string;
surName: string;
dateofBirth: string;
ethnicity: string,}]
进入
@observable users = [{
firstName: '',surName: '',dateofBirth: '',ethnicity: '',maritalStatus: '',}]
解决方法
试试这个:
export default function PersonalInformation_Paper() {
const { userStore } = useRootStore();
return useObserver(() => (
console.log(userStore)
<>
<div>
{userStore.users && userStore.users!=undefined ? userStore.users.map((user) => {
return (
<option key={user.firstName} value={user.firstName}>
{user.firstName}
</option>
);
}) : []}
</div>
</>
));
}
,
当您初始化 Store users
时,隐式设置为 undefined。即使稍后调用 api,第一次渲染也会因此失败。
你需要用空数组初始化它们或检查它们是否存在:
type User = { firstName: string; surName: string; dateofBirth: string; ethnicity: string,maritalStatus: string,};
export class UserStore {
// Like that
@observable users: Array<User> = [];
// ...
}
或检查用户数组是否存在于您的组件中:
export default function PersonalInformation_Paper() {
const { userStore } = useRootStore();
return useObserver(() => (
<>
{userStore.users ?
<div>
{userStore.users.map((user) => {
return (
<option key={user.firstName} value={user.firstName}>
{user.firstName}
</option>
);
})}
</div>
: 'Loading...'}
</>
));
}