问题

我有一个PageContext,它保持User对象的状态作为数组.每个User对象包含一个ScheduledPost对象,当用户决定添加新帖子时会发生突变.我不知道如何在发生时触发PageContext上的更新(我想避免forceUpdate()调用).我需要以某种方式通知它,以便重新呈现-rending帖子,维护计时器等.

请参阅代码:

 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钩子消费我的提供程序时:

 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的新手,我觉得我在这里使用的结构很麻烦,只是不对.

  最佳答案

用户在哪里发生变异?如果你将它们存储在你的状态中,那么应该检测到更改.但是,如果你使用构建在User类中的方法让它们直接更新本身,那么React将不会接受它们.你需要在状态中更新整个users数组,以确保React能够响应更改.

  相同标签的其他问题

javascriptreactjstypescriptstate