javascript - 当状态对象发生变化时更新上下文

Question

我有一个 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 的新手，我觉得我在这里使用的结构很麻烦而且不正确。

Answer 1

用户在哪里发生变异？如果您将它们存储在显示的状态中，则应该检测到更改。但是，如果您使用 User 类中内置的方法来让它们 directly update自己，那么 React 将不会接受它们。您需要更新状态中的整个 users 数组，以确保 React 可以响应更改。

如果不确切了解您当前更新用户的位置/方式，很难给出更具体的示例，但是一般化的变更可能会像这样(如果需要，您仍然可以使用类方法):

const newUsers = Array.from(users); // Deep copy users array to prevent direct state mutation.
newUsers[someIndex].createScheduledPost(myTitle, myContent, myDate);
setUsers(newUsers); // Calling the setX function tied to your useState call will automatically trigger updates/re-renders for all (unless otherwise specified) components/operations that depend on it