React Hooks 上的 useState 不更新数组

Question

我已经尝试了很多东西，但似乎无法理解为什么 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 并注意不同的响应。

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

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

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

那我们如何解决这个问题呢？ 不管是什么原因，我们如何完成它？ 如果我们不知道它何时可用，我们如何在任何时间点使用我们的状态并根据我们的状态执行计算？ 我们如何确保我们等待我们需要的任何东西，然后使用我们期望的值？

Answer 1

对于任何来到这里并且无法设置/更新 useState 数组的人，您需要使用扩展运算符 (...) 而不仅仅是数组，例如“[...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]);
  };

Answer 2

似乎 useState 是异步的，并且在调用它后不会立即更新值。

在此处查看相同的案例

Answer 3

useState的 setTypes 是一个异步函数，因此更改不会立即生效。 您可以使用useEffect检查是否有任何变化

useEffect(()=>{
    const defaultArgs = { per_page: 10, type };
    const requestArgs = { ...defaultArgs, ...args };
    requestArgs.restBase = types;
    console.log("types updated",types)
},[types])

您可以删除loadPosts因为现在 useEffect 将在类型更改时运行

Answer 4

您已将您的类型声明为一个数组，但您正在将一个字典字典传递给它。 尝试这个：

const [types, setTypes]     = useState({});

你也不需要打电话

loadPosts()

因为 useState 钩子会重新渲染你的组件，只更新需要的内容。

Answer 5

好的，简短的回答是由于闭包

这不是由于其他答案所说的asynchronous ！

---

解决方法(☞ﾟヮﾟ)☞

您可以通过console.log在return函数中检查更改，如下所示。

return (
    <div> Hello World! 
      {
        console.log(value) // this will reference every re-render
      } 
    </div>
  );

或创建一个新的 useEffect value作为依赖项，如下所示

 React.useEffect(() => {
    console.log(value); // this will reference every value is changed
  }, [value]);

 function App() { const [value, Setvalue] = React.useState([]); React.useEffect(() => { Setvalue([1, 2, 3]); console.log(value); // this will reference to value at first time }, []); return ( <div> Hello World! { console.log(value) // this will reference every re-render } </div> ); } ReactDOM.render(<App />, document.getElementById('app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="app"></div>

阅读此处更详细： useState 设置方法未立即反映更改