我使用Next.js进行服务器端呈现,在每次呈现时,props被传递给页面组件,例如:
const Users = ({ users }) => {
return (
// Wraps the page in a context provider passing the users
);
}
export const getServerSideProps = async () => {
const users = ... // Fetches from a database or api
return { props: { users } };
}
export default Users;
上下文提供程序示例:
const Context = createContext(undefined);
export function ContextProvider({ users, children }) {
// Imagine reducer and state being defined elsewhere
const [state, dispatch] = useReducer(reducer, users);
// A useState updating the state when the users changes
useState(() => { ... }, [...]);
return (
<Context.Provider value={{ state, dispatch }}>
{children}
</Context.Provider>
);
}
代码可能包含错误,它只是一个示例,而不是实际代码。
假设我有两个“用户”页面,我从一个导航到另一个。然后,从getServerSideProps
提供的users
prop将在页面加载时更改,但状态中的值仅在useEffect
运行后更改。因此,第二个用户页面的第一次呈现包含错误的用户。除了将用户作为prop传递到所有位置之外,还有什么方法吗?立即更新状态?我不希望第一次渲染使用旧的用户对象。
1条答案
按热度按时间ws51t4hk1#
getServerSideProps
返回的数据作为props传递给页面,同样的props也可以在_app.js中访问:然后在
MyApp
中,您可以接收传递的数据:最后,您可以从
MyApp
更新上下文