代码之家  ›  专栏  ›  技术社区  ›  rottenCoderSo

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

  •  2
  • rottenCoderSo  · 技术社区  · 2 年前

    我正在从本地服务器获取数据,我想将响应放入 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) ? 它被放置在两行之后,并在控制台中显示以下内容: Array [] ,所以我从服务器得到了正确的响应,但当我尝试将其放入useState变量时,它不起作用,有趣的是 Ctrl + S 那么这个项目呢 安慰日志(图像) 在控制台中的显示与 安慰日志(res.content) ,这就是我希望在不必拯救项目的情况下实现的。

    我需要 image 设定 res.content 从一开始,我就看了这个视频 https://www.youtube.com/watch?v=HvM9Ob4CHa0 这个男孩和我做的一样,但这对他来说很有效,看看下面的例子 1:45, line: 30 ,我不知道发生了什么。

    这是我发现的一条有趣的线索 Why is useState() not setting the default value? 但我觉得这和我的情况不一样。

    1 回复  |  直到 2 年前
        1
  •  2
  •   David Scholz    2 年前

    这个 setState 功能 useState 是异步的。设置后立即记录状态,不会显示刚刚设置的值。

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

    您可以通过记录状态来测试这一点 images 外面 useFocusEffect .

    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 ,您将看到第二个控制台。由于重新加载而导致日志丢失。这一次使用之前设置的值。