React Hooks 上的 useState 不更新数组

我已经尝试了很多方法，但似乎无法理解为什么 setTypes 不会更新“类型”数组？

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

请查看 console.log 并注意不同的响应。

我想做的是加载类型列表，在本例中为“帖子”、“页面”和“案例”，然后根据当前“类型”呈现帖子列表。默认类型是“post”。

如果我将 [types] 添加到 useEffect.我终于得到了值，但组件渲染不停。

感谢大家的评论。很多人都指出了这个问题，因为我们设置状态并不意味着它会立即设置，因为它是异步的。

那我们如何解决这个问题呢？不管出于什么原因，我们如何才能做到这一点？如果我们不知道状态何时可用，我们如何在任何时间点处理我们的状态并根据我们的状态执行计算？我们如何确保我们等待我们需要的一切，然后使用我们期望的值？

对于任何来到这里并且无法设置/更新 useState 数组的人，您需要使用扩展运算符 (...) 而不仅仅是数组，例如在 Typescript 中使用“[...initState]”而不是“initState”...

 //initialise
  const initState: boolean[] = new Array(data.length).fill(false);
  const [showTable, setShowTable] = useState<boolean[]>([...initState]);

  // called from an onclick to update
  const updateArray = (index: number) => {
    showTable[index] = !showTable[index];
    setShowTable([...showTable]);
  };