У меня есть PageContext, который содержит состояние User объектов в виде массива.Каждый объект User содержит объект ScheduledPost, который видоизменяется, когда пользователь решает добавить новое сообщение.Я не знаю, как вызвать обновление на моем PageContext, когда это произойдет (я хочу избежать forceUpdate() вызова).Мне нужно как-то получить уведомление об этом, чтобы перерисовывать посты, поддерживать таймер и т. Д.
Пожалуйста, посмотрите код:
class User {
name: string;
createTime: number;
scheduledPosts: ScheduledPost[] = [];
/*
* Creates a new scheduled post
*/
public createScheduledPost(title : string, content : string, date : number): void {
this.scheduledPosts.push(Object.assign(new ScheduledPost(), {
title,
content,
date
}));
}
}
class ScheduledPost {
title: string;
content: string;
date: number;
public load(): void {
// Create timers etc.
}
public publish(): void {
// Publish post
}
}
// PageContext/index.tsx
export default React.createContext({
users: [],
editingUser: null,
setEditingUser: (user: User) => {}
});
// PageContextProvider.tsx
const PageContextProvider: React.FC = props => {
const [users, setUsers] = useState<User[]>([]);
const [editingUser, setEditingUser] = useState<User>(null);
// Load users
useEffect(() => {
db.getUsers()
.then(result => setUsers(result));
}, []);
return (
<PageContext.Provider value={{
users,
editingUser,
setEditingUser
}}>
{props.children}
</PageContext.Provider>
);
};
То, чего я хотел бы добиться, это,когда мой провайдер использует useContext hook:
const ctx = useContext(PageContext);
Я хотел бы создать запись расписания из любого компонента, например, так:
// Schedule post (1 hour)
ctx.editingUser.createScheduledPost("My post title", "The post content", (new Date).getTime() + 1 * 60 * 60);
Однако это не сработает, так как Reactне знает, что свойство User только что мутировало.
Вопросы:
- Как я могу заставить React получать уведомления об изменениях в любом из
Userэкземпляр объекта?Как решить эту проблему правильно (исключая forceUpdate)? - Я правильно делаю?Я новичок в React и чувствую, что структура, которую я здесь использую, громоздка и просто не права.