无法使用 useState 钩子设置值？为什么会发生这种情况？

Question

const [userDetail, setUserDetail] = useState([])

useEffect(() => {
    getUsersData()
}, [])

const getUsersData = async () => {
    const userResp = await MyService.getInstance().getEntities()

    let data = []
    console.log(userResp)

    if (userResp) {
        userResp.map((d) => {
            data.push({
                name: d.name,
                username: d.username
            })
        })
        
        setUserDetail(data) // < --------this line--------
        console.log(data)
    }

    console.log(userDetail)
}

setUserDetail 不会设置 userDetail 数组的值，即使 console.log(userDetail) 显示空数组。 像这样：

Answer 1

两件事：

1. 您正在使用 .map 方法作为 .forEach。 .map 方法的目的是返回一个转换后的新数组。那么，这个数据数组就不是必须的了。如果你想转换一个数组，你可以使用一个map，但没有必要创建一个新的数组。 Map 将返回转换后的新数组。

  const[ userDetail , setUserDetail ] = useState([])

  useEffect( () => {
    getUsersData()
  }, [])

  const getUsersData = async() =>{
    const userResp = await MyService.getInstance().getEntities()
    console.log(userResp)
    if(userResp){
     setUserDetail(
     userResp.map((d) => (
        {
          name:d.name,
          username:d.username
        })
     ))
    }
  }

 console.log(userDetail)

2. 尝试将您的 console.log 移到 getUsersData 方法之外。然后，您将在每次渲染后看到 userDetail 的所有值。