为什么 useState 挂钩在页面重新加载之前不设置值？

Question

我正在从本地服务器获取数据，我想将响应放入 images 以便之后可以呈现这些 url

const [images, setImages] = useState([])

useFocusEffect(
  React.useCallback(()=>{
  let id = '62432174021cfe441eb49bf7'

  findImages(id)
  .then(res=>{
     console.log(res.content)
     setImages(res.content)          
     console.log(images)          
  })
 },[])

)//useEffect

你看到那个 console.log(res.content) 了吗？它在控制台中显示以下内容：

Array [
  Object {
    "__v": 0,
    "_id": "6243499ae6b17dc7de44fb0c",
    "chapterid": "62432174021cfe441eb49bf7",
    "url": "https://firebasestorage...",
  },
  Object {
    "__v": 0,
    "_id": "624349b0e6b17dc7de44fb0e",
    "chapterid": "62432174021cfe441eb49bf7",
    "url": "https://firebasestorage...",
  },
  Object {
    "__v": 0,
    "_id": "624349b7e6b17dc7de44fb10",
    "chapterid": "62432174021cfe441eb49bf7",
    "url": "https://firebasestorage...",
  },
  Object {
    "__v": 0,
    "_id": "624349bde6b17dc7de44fb12",
    "chapterid": "62432174021cfe441eb49bf7",
    "url": "https://firebasestorage...",
  },
]

你看到那个 console.log(images) 了吗？它被放置在 2 行之后，它在控制台中显示以下内容：Array []，所以我从服务器得到了正确的响应但是当我尝试将它放入 useState 变量时它不起作用，有趣的是是当我 Ctrl + S 项目然后 console.log(images) 在控制台中获得与 console.log(res.content) 相同的显示时，这是我想要发生的而无需保存项目。

我需要 image 从一开始就设置 res.content，我看了这个视频 https://www.youtube.com/watch?v=HvM9Ob4CHa0 这个男孩和我做的一样，但对他有用，请看最小 1:45, line: 30，我不知道发生了什么。

这是我发现的一个有趣的线程Why is useState() not setting the default value?，但我认为它与我的场景不同。

Answer 1

useState 的 setState 函数是异步的。设置后立即记录状态，不会显示您刚刚设置的值。

但是，框架保证新值将在下一个渲染周期可用。

您可以通过在 useFocusEffect.

之外记录状态 images 来测试它

const [images, setImages] = useState([])

useFocusEffect(
  React.useCallback(()=>{
  let id = '62432174021cfe441eb49bf7'

  findImages(id)
  .then(res=>{
     console.log(res.content)
     setImages(res.content)                 
  })
 },[])

console.log(images)

您会注意到两条日志消息。一个带有空数组。通过 setImages 更改状态后，由于重新渲染，您将看到第二个 console.log。这次使用之前设置的值。

为什么 useState 挂钩在页面重新加载之前不设置值？

why is the useState hook not setting the value until the page is reloaded?

react-native

expo

react-hooks