useState sur React Hooks ne mettant pas à jour Array

J'ai essayé beaucoup de choses et je n'arrive pas à comprendre pourquoi setTypes ne met pas à jour le tableau 'types' ??

import { useState, useEffect } from 'react';
import { PostList } from './post-list';
import * as api from '../utils/api';

export const PostSelector = (props) => {
  const [posts, setPosts]     = useState([]);
  const [loading, setLoading] = useState(false);
  const [type, setType]       = useState('post');
  const [types, setTypes]     = useState([]);
  
  const fetchTypes = async () => {
    setLoading(true);
    const response = await api.getPostTypes();
    delete response.data.attachment;
    delete response.data.wp_block;
    const postTypes = response.data;
    console.log(response.data); // {post: {…}, page: {…}, case: {…}}
    setTypes(postTypes);
    console.log(types); // []

    // Why types remain empty??
  }

const loadPosts = async (args = {}) => {
  const defaultArgs = { per_page: 10, type };
  const requestArgs = { ...defaultArgs, ...args };
  

  requestArgs.restBase = types[requestArgs.type].rest_base; // Cannot read property 'rest_base' of undefined
  
  const response = await api.getPosts(requestArgs);
  console.log(response.data);
}

useEffect(() => {
  fetchTypes();
  loadPosts();
}, []);

  return (
    <div className="filter">
      <label htmlFor="options">Post Type: </label>
      <select name="options" id="options">
        { types.length < 1 ? (<option value="">loading</option>) : Object.keys(types).map((key, index) => <option key={ index } value={ key }>{ types[key].name }</option> ) }
      </select>
    </div>
  );
}

S'il vous plaît, jetez un œil à console.log et notez les différentes réponses.

Ce que j'essaie de faire est de charger la liste des types, dans ce cas 'post', 'page' et 'case', puis d'afficher une liste de posts en fonction de l'actuel 'taper'. Le type par défaut est 'post'.

Si j'ajoute [types] à useEffect. J'ai enfin obtenu les valeurs mais le composant est rendu sans interruption.

Merci à tous pour vos commentaires. Plusieurs personnes ont souligné le problème, étant que, le fait que nous définissions l'état ne signifie pas qu'il sera défini tout de suite parce qu'il est asynchrone.

Comment pouvons-nous résoudre ce problème alors? Quelles que soient les raisons, comment y parvenir? Comment pouvons-nous travailler avec notre état à tout moment et effectuer des calculs basés sur notre état si nous ne savons pas quand il sera disponible? Comment pouvons-nous nous assurer que nous attendons tout ce dont nous avons besoin, puis utilisons les valeurs que nous attendons?