Tengo un problema al mostrar una lista para la selección de usuarios. Cuando abro la página por primera vez, funciona correctamente. Pero después de recargar la página, los usuarios "desaparecen" o se descargan. Antes de recargar Después de recargar . Aquí está el código que tengo.

Mi página:

 const Page = observer(() => { const { project } = useContext(Context); const [modalVisible, setModalVisible] = useState(false); useEffect(() => { fetchUsers().then((data) => project.setUsers(data)); }, []); return ( <Container> <Button onClick={() => setModalVisible(true)}> ChooseUser </Button> <ChooseUser show={modalVisible} onHide={() => setModalVisible(false)} /> </Container> ); }); export default Page;

Modal:

 const ChooseUser = observer(({ show, onHide }) => { const { project } = useContext(Context); return ( <Modal show={show} onHide={onHide}> <Form> <Form.Select> {/* The problem with this list */} {project.users.map((user) =><option>{user.username}</option>)} </Form.Select> </Form> </Modal> ); });

Creación de contexto en index.js:

 export const Context = createContext(null); ReactDOM.render( <Context.Provider value={{ project: new ProjectStore(), }} > <App /> </Context.Provider>, document.getElementById('root'), );

ProyectoTienda

 export default class ProjectStore { constructor() { this._users = []; makeAutoObservable(this); } setUsers(value) { this._users = value; } get users() { return this._users; } }