reactjs React Context API是否可以在不使用useEffect或类似工具的情况下根据属性更改进行更改?

8dtrkrch  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(96)

我使用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传递到所有位置之外,还有什么方法吗?立即更新状态?我不希望第一次渲染使用旧的用户对象。

ws51t4hk

ws51t4hk1#

getServerSideProps返回的数据作为props传递给页面,同样的props也可以在_app.js中访问:

export async function getServerSideProps() {
  return {
    props: {
      users,
      toContextProvider: {first: "val1", second: "val2"}
    },
  };
}

然后在MyApp中,您可以接收传递的数据:

export default function MyApp({ Component, pageProps }) {
  console.log(pageProps.toContextProvider);
 //...
}

最后,您可以从MyApp更新上下文

相关问题