JS: Problem with with displaying a select list in modal on page-CodePudding

I have a problem with displaying a list for user selection. When I open the page for the first time, it works correctly. But after I reload the page, the users "disappear" or are unloaded. Before reload After reload. Here is the code I have.

My-page:

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>
  );
});

Context creating in index.js:

export const Context = createContext(null);

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

ProjectStore

export default class ProjectStore {
  constructor() {
    this._users = [];
    makeAutoObservable(this);
  }

  setUsers(value) {
    this._users = value;
  }

  get users() {
    return this._users;
  }
}

CodePudding user response：

You might try Array.from(project.users).map((user) ... instead of project.users.map((user) ... and see if that helps.

CodePudding user response：

Your fetchUsers fuction may be asynchronous and the page is loading before the users are fetched.

How does your fetchUsers function work? Can you post that code as well?